Level Up Fridays • Episode 6

How to create better lists with CSS Counters


Learn how to use CSS Counters to style traditional ordered lists and more complex examples.

This episode of Level Up Fridays is all about improving the design of your ordered lists using CSS Counters. The style of ordered lists is one of those little design details that make a design just feel all the more tight and cohesive. However, for years I thought these bits of design detail were un-styleable (and they actually were for years). So when I learned that I could actually style ordered lists without manually adding numbers to HTML or using JavaScript to insert numbers onto the page, I was thrilled.

In this episode, I'll show you how to style traditional ordered lists and how you can use the same attribute to style a more complex "easy as 1-2-3" sequence.

Zeke Binion
Product Designer / Developer / Speaker / Gamer / Lover of Slashes