It’s a perfectly reasonable to want to style the marker of list items. You know: blue bullets with black text in an unordered list. Or red counters with knockout white numbers in an ordered list.
There is a working draft spec that defines a ::marker pseudo-element that would give us this control.
/* Not supported anywhere; subject to change */
li::marker {
color: blue;
}It’s possible to do this styling now, though, thanks to CSS counters. The trick is to remove the list-style, then apply the markers through pseudo-element counters.
ol {
list-style: none;
counter-reset: my-awesome-counter;
}
li {
counter-increment: my-awesome-counter;
}
li::before {
content: counter(my-awesome-counter);
/* Style away! */
}See the Pen Styled List Counters by Chris Coyier (@chriscoyier) on CodePen.
This is so overdue. I can’t believe to this day there’s no option to natively style a list with a dash.
In the meantime, if I’m already loading jQuery, I do something like this…
Example breaks when text is longer than container.
Try this styling – http://codepen.io/_lukewh/pen/WopzzO :)
Great post! I’d recommend some changes to the styling though. Currently if a list item goes on to two lines the text will wrap under the counter, whereas you could absolutely position the counter to the tag, and give the tag some padding accordingly :)
(On mobile or id post a Codepen fork!)