HTML + CSS: lista ordenada com leading zero

Por João Paulo | Tags: css, html, leading zero, list-style-type

Pode ser uma questão de gosto pessoal, mas ao criar uma lista ordenada eu prefiro que os números menores que 10 sejam preenchidos com leading zero, ou seja, com o zero antes dos números.

Eu prefiro assim:

• 01 – Primeiro
• 02 – Segundo
• …
• 10 – Décimo

E não,

• 1 – Primeiro
• 2 – Segundo
• …
• 10 – Décimo

Ocorre que, por padrão, ao criar uma lista ordenada em HTML, a propriedade CSS list-style-type do elemento <li> vem configurada com o valor decimal, ou seja, sem os zeros. Exemplo:

ol li { list-style-type: decimal }

Para obter os leading zeros, você deve configurar a propriedade da seguinte forma:

ol li { list-style-type: decimal-leading-zero }

Fica aí a dica!