Prefix a word to a list serial number

Question

So, I searched high and low and could not find an answer for a seemingly simple problem.

I have an ordered list:

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

What is displayed:

• Some texts here
• Another text here.
• Oh yes that's what beautiful text

What I really want to display:

Step 1. Some texts here

Step 2. Another text here.

Step 3. Oh yes, that’s such a beautiful text.

Question: Is this possible, and if so, how will I do it without using dubious decisions?

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 some pretty text</li> </ol>