Custom List Number Styling
How about a classic CSS trick! This isn’t even so tricky anymore, since CSS has
counter-reset and such 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:
Here’s an 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:
Make sure to check out the fun little media query change. Lea Verou’s food site, of course, has counter-based numbering as well.
Here’s an interesting demo from Jonathan Snook that has a “timeline” look and uses custom counters to label each section:
- Counting With CSS Counters and CSS Grid
- Numbering In Style
- Fun Times with CSS Counters
- Style List Markers in CSS
- counter-increment and counter-reset in the Almanac, and the theoretical ::marker
- Automatic Numbering With CSS Counters
- Ordered Lists with Unicode Symbols