Ian McNally

Fancy list numbering with CSS

November 09, 2017

It’s not every day that I’m styling a list like:

My fancy numbered list

But today was. So I came across a wonderful piece on CSS Tricks that pointed me in the right direction.

On the list container (an <ol>), I added the CSS rule:

/* let's pretend my <ol> has a class 'ol' */
.ol {
  counter-reset: my-list-counter;
}

Which acts as a counter set/reset.

And on each item (<li>), I needed to increment the counter and set the content from the current counter result. I chose to format it as decimal-leading-zero (the second argument to counter; any valid list-style-style will do). All together it looks like:

.li:before {
  content: counter(my-list-counter, decimal-leading-zero);
  counter-increment: my-list-counter;
}
Ian McNally

Hey, I'm Ian. I build websites and write about what I learn as I go. Follow me on Twitter.