Using CSS Counters for Custom List Number Styling

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

How about a classic CSS trick! Getting custom styling on lists isn’t even so tricky anymore, since CSS counters have introduced counter-increment and counter-reset, and that is perfect for this. I just wanted to make sure you knew how it works and had some easy-to-copy examples at the ready.

Let’s say all you wanna do is style the dang numbers:

Oh and hey, if you’re worried about lining up the numbers, you could apply the CSS counter with ::marker and let the magic of list-style do automatic alignment, or here’s an idea with subgrid.

Here’s a CSS counter example from the CodePen Challenges pages:

The keyframers made a Pen the other day that used pretty cool styles. Here’s a redux:

Recipe sites are great places to look for custom list styles, as lists of steps are such a prevelant feature. On Mat Marquis’ site, he’s got some fun ones. I ripped off his CSS and moved it here:

Examples of CSS counters

Make sure to check out the fun little media query change. Lea Verou’s food site, of course, has CSS counter-based numbering as well.

Here’s an interesting CSS counter demo from Jonathan Snook that has a “timeline” look and uses custom counters to label each section:

More Information