Style List Markers in CSS
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
::markerpseudo-element that would give us this control.
Code language: CSS
/* 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.
Code language: CSS
ol {
list-style: none;
counter-reset: my-awesome-counter;
}
li {
counter-increment: my-awesome-counter;
}
li::before {
content: counter(my-awesome-counter);
/* Style away! */
}
