Skip to main content

How to make an ordered list with leading zero's using CSS

Adam Duncan posted a question on Twitter this morning, asking for tweet-sized solutions to achieve an ordered list with leading zero’s using CSS.

His solution:

ol { counter-reset: z; }
ol li { counter-increment: z; }
ol li::before { content: counter(z)'. '; }
ol li:nth-child(-n+9)::before { content: '0' counter(z)'. '; }

Another alternative solution:

ol {
list-style-type: none;
counter-reset: li;
}
li:before {
counter-increment: li;
content: counter(li, decimal-leading-zero)'. ';
}

Checkout the CodePen to see it in action.