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:

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>