Styling List Markers

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

Have you ever tried to style the numbers in an ordered list? You end up doing dumb stuff like wrapping the insides in spans, styling the list items, then removing that styling with the span. Or using background images in crazy ways. Or removing the list styling and putting in your own numbers.

All of those ways suck. Roger Johansson has a good way with pseudo element counters.

P.S. The spec for lists has been updated with some new super nice stuff. (First time in 8.5 years)

P.S.S. IS THERE FRIGGIN ANYTHING PSEUDO ELEMENTS CAN’T DO?

Direct Link →