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 ::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.

Style List Markers in CSS is a post from CSS-Tricks




Add a Comment

Your email address will not be published. Required fields are marked *