Here's a scenario I find myself in now and then: I want an ordered list, and I want it to be pretty.
Because semantic HTML is important, I reach for the trusty
The problem is that the "bullets" (the prefix numbers) are in a CSS-selector dead zone. There is no way to style them independently!
I am not one to accept lackadaisical bullets. So I did some digging, and found an awesome solution 🎉.
CSS has a pretty nifty trick up its sleeve to deal with this situation. It has a built-in counter mechanism.
Here's how that looks:
Let's go through this step by step:
counter-incrementis a CSS property that will increment a specific "counter" variable whenever it encounters a new element. We put it on every ordered-list item. I named my variable "muffins", because I like muffins.
- Before each ordered-list item, I display the current value of the count.
counter()can be thought of as a CSS function which returns the value for a specific counter. In this case,
- I remove the default uncustomizable bullets with
list-style: none, and specify a counter reset. This ensures that if I have multiple
<ol>elements on a page, the counter will reset for each one.
With this CSS, we've effectively recreated a default
<ol>. The difference is that we now have a CSS selector,
ol li:before, we can use to apply custom styles.
Here's how ordered lists look on this blog, using this trick:
- I think you do something with dry ingredients
- The mixers play a role here
- Combine everything while crossing fingers
- Transfer to oven
- Poke with toothpick for fun, and then serve
It's not night-and-day, but I'm very pleased with the overall effect!
CSS counters feel like a next-gen feature, but actually they've been around forever. They're supported in Internet Explorer 8!!
Use this property without guilt ✨
The CSS Working Group agrees—they've penned a draft for a new ::marker pseudo-element, which would let you apply styles directly to list bullets.
Unfortunately, this is only available in Firefox and Safari.
Also: there's one more trick CSS counters have up their sleeves…
Here's the really cool thing:
counter has a cousin,
counters, and it works for nested lists.
Notice how the numbering stacks recursively, in this awesome-sounding curriculum:
- Welcome to web school!
- What are tags anyway?
- The truth about DOM
- Wallpaper of the Web
- Box Model Mayhem
- Specificity as a service
Here's the CSS necessary for this:
It's super similar, except you use
counters instead of
counter, and you add an "intermediary" spacer (in this case, a period).
ol doesn't get a lot of love compared to the
ul. And yet, people love counting things! Something doesn't add up.
Maybe with this neat trick, we'll finally see
ol get the attention it deserves.