html - How to prefix a word in a list number

Question

So I've searched high and low and have been unable to find an answer for a seemingly simple problem.

I have an ordered list like this:

<ol>
  <li>Some text here</li>
  <li>Some more text here..</li>
  <li>Oh yeah, here's some pretty text</li>
</ol>

Which displays:

1. Some text here
2. Some more text here..
3. Oh yeah, here's some pretty text

What I'd like to really display:

Step 1. Some text here

Step 2. Some more text here..

Step 3. Oh yeah, here's some pretty text

Question: Is this possible, and if so, how would I go about doing it without using questionable solutions?

Answer 1

You can use ::before (:before for IE8) and counter-reset/increment

ol {
  counter-reset: number;
}
li {
  list-style: none;
  counter-increment: number;
}
li::before {
  content: "Step " counter(number) ".";
  position: relative;
  left:-5px
}

<ol>
  <li>Some text here</li>
  <li>Some more text here..</li>
  <li>Oh yeah, here's some pretty text</li>
</ol>