Es ist absolut verständlich, die Marker von Listenpunkten stylen zu wollen. Du weißt schon: blaue Aufzählungszeichen mit schwarzem Text in einer unsortierten Liste. Oder rote Zähler mit weiß hervorgehobenen Zahlen in einer sortierten Liste.
Es gibt einen Arbeitsentwurf (Working Draft), der ein ::marker Pseudoelement definiert, das uns diese Kontrolle ermöglichen würde.
/* Not supported anywhere; subject to change */
li::marker {
color: blue;
}Diese Art von Styling ist jedoch dank CSS-Zählern jetzt möglich. Der Trick besteht darin, list-style zu entfernen und dann die Aufzählungspunkte durch Pseudo-Element-Zähler anzuwenden.
ol {
list-style: none;
counter-reset: my-awesome-counter;
}
li {
counter-increment: my-awesome-counter;
}
li::before {
content: counter(my-awesome-counter);
/* Style away! */
}Sehen Sie den Pen Styled List Counters von Chris Coyier (@chriscoyier) auf CodePen.
Das ist so überfällig. Ich kann nicht glauben, dass es bis heute keine Option gibt, eine Liste nativ mit einem Gedankenstrich zu gestalten.
In der Zwischenzeit, wenn ich bereits jQuery lade, mache ich etwas wie das hier...
Das Beispiel funktioniert nicht mehr, wenn der Text länger ist als der Container.
Probieren Sie dieses Styling aus – http://codepen.io/_lukewh/pen/WopzzO :)
Toller Beitrag! Ich würde jedoch einige Änderungen am Styling empfehlen. Derzeit, wenn ein Listenelement in die zweite Zeile geht, wird der Text unter dem Zähler umgebrochen, während Sie den Zähler absolut zum Tag positionieren und dem Tag entsprechend etwas Padding geben könnten :)
(Auf Mobilgeräten oder ich würde einen Codepen-Fork posten!)