Ein Wort zu einer geordneten Listennummer vorfixieren

Also ich habe hoch und niedrig gesucht und konnte keine Antwort für ein scheinbar einfaches Problem finden.Ein Wort zu einer geordneten Listennummer vorfixieren

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:

Einige Text hier

Noch mehr Text hier ..

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?

Quelle

2016-02-11 Derek

Mögliche Duplikat [Wie kann ich mit einer statischen Zeichenfolge geordnete Liste Artikelnummern Präfix mit CSS?] (Http: //stackoverflow.com/questions/5568229/how-can-i-prefix-ordered-list-item-numbers-with-a-static-string-using-css) – wmeade

@wmeade leider ist es nicht :-(das besondere Solution prefixiert den Text innerhalb des 'li' mit dem Buchstaben, nicht die tatsächliche * Zahl *. – Derek

Ich habe diese Antwort ein wenig modifiziert und habe dies https://jsfiddle.net/4ok1Lxmo/. – wmeade

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>

Quelle

2016-02-11 23:57:16 dippas

Gibt es eine Möglichkeit, das Präfix "Step N" fett zu machen? –

Fügen Sie 'font-weight: 700' in die letzte Regel des Snippets' :: before' hinzu – dippas

Ein Wort zu einer geordneten Listennummer vorfixieren

Antwort

Verwandte Themen