How about a classic CSS trick! This isn’t even so tricky anymore, since CSS has counter-increment and 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:
See the Pen Custom List Style 2 by Chris Coyier (@chriscoyier) on CodePen.
Oh and hey, if you’re worried about lining up the numbers, you could apply the counter with ::marker and let the magic of list-style do automatic alignment, or here’s an idea with subgrid.
Here’s an example from the CodePen Challenges pages:
See the Pen Custom List Counters by Chris Coyier (@chriscoyier) on CodePen.
The keyframers made a Pen the other day that used pretty cool styles. Here’s a redux:
See the Pen Custom List Style 3 by Chris Coyier (@chriscoyier) on CodePen.
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:
See the Pen Wilto Counters by Chris Coyier (@chriscoyier) on CodePen.
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:
See the Pen Timeline CSS with Counters by Jonathan Snook (@snookca) on CodePen.
Trend 2018 warning. Everyone on earth will start to style their list numbers.
There is something satisfying about revisiting concepts you’ve learned a long time ago and finding a new use for them. Thanks for this post. (a bit of nostalgia)
Any way to get the numbers/bullets to “hang” like normal ones would?
Probably negative margin or negative text-indent… depends on your custom styling!
The timeline concept is really cool. I can see that being a fun way to style conversation between two people as well.