Styling ordered lists was always a tricky task and I’m not the only one who thinks that. To style numbers, you need to remove default browser styles and add hooks to your lists elements in order to target them and style accordingly.
In this article you’ll learn how to add some CSS3 fine-tuning to your ordered lists, using a semantic markup approach and CSS pseudo-elements.
When I first read Roger Johansson’s article about styling ordered list numbers, I must admit I seriously felt in love with that technique. Using that technique, I will try to go a bit further and show you two different styling possibilities for ordered lists.
Below you’ll find nothing than a simple ordered list (ol) markup:
Further, I’ll try to explain how this works in a few words.
This technique uses Automatic counters and numbering. Basically it’s about using two CSS 2.1 properties: counter-reset (this initiate a counter) and counter-increment (kinda self-explanatory, this increments the previous counter). As you will see below, the counter-increment will be used along with CSS generated content (pseudo-elements).
On pseudo-elements animation
Some CSS3 numbers animations are also included in this demo. Unfortunately, as far as I know, and at this time, Firefox is the only one who supports animated pseudo-elements. Let’s hope that will improve sooner or later.
These list looks well also on older browsers, as you can see below:
Thank you all for reading and I hope you enjoyed it. Feel free to share your thoughts!