Rolling Your Own Custom Counters for Ordered Lists

Web designers use lists all the time. When you want to customize the generated content (the numbers) more than just font size or color, it can be challenging. This tip is about turning off the auto-generated counter and recreating your own - and styling them the way you like.

Note: For time sake, this tip assumes that you are using some type of reset stylesheet. A good reset will usually turn off all the default list stuff.

The HTML markup is just a regular old ordered list.

<ol><li> ... </li></ol>

First, on the ordered list, we want to reset the counter and specify the child element that should be counted. In this case, we'll be counting each list item.

ol { counter-reset: li; }

Next comes the business-end of this whole thing - making the numbers, your way. Using psuedo classes you can place and specify the increment and type of numbers you want. Yeah. I know.

ol li:after { content: counter(li, decimal-leading-zero); counter-increment: li; }

Using this method, you can count all different kinds of elements on your pages and produce some really tricked out numbered stuff.

Demo on CodePen