Ein Wort zu einer geordneten Listennummer vorfixieren

Question

Also ich habe hoch und niedrig gesucht und konnte keine Antwort für ein scheinbar einfaches Problem finden.

Ich habe eine geordnete Liste wie folgt aus:

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

Welche zeigt:

1. Einige Text hier
2. Noch mehr Text hier ..
3. Oh ja, hier einige hübscher Text

Was würde Ich mag anzuzeigen:

Schritt 1. Einige Text hier

Schritt 2. Noch mehr Text hier ..

Schritt 3. Oh ja, hier einige hübscher Text

Frage: Ist dies möglich, und wenn ja, wie würde ich mich über sie, ohne fragwürdige Lösungen zu tun?

Answer 1

können Sie verwenden ::before (:before für IE8) und 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>