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?

Calvert

Possible duplicate of How can I prefix ordered list item numbers with a static string using CSS? – Rodina

@Rodina unfortunately, it's not :-( that particular solution prefixes the text within the li with the letter, not the actual number. – Calvert

I modified that answer a little and got this jsfiddle.net/4ok1Lxmo. – Rodina

@Rodina would you mind writing an answer so I can accept it please. – Calvert

No worries, Dippas answer covers the same, so feel free to grab his. – Rodina

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>

Sifuentes

Is there any way to make the "Step N" prefix bold? – Turenne

Just add font-weight:700 in the last rule of the snippet ::before – Sifuentes