Numeração automática usando a função counter () em CSS

Uma das implicâncias que tenho com listas é usar list-style: decimalporque sempre coloca os números fora da caixa. Porém, recentemente aprendi que você pode replicar os números decimais usando a counter()função em CSS.

Primeiro, defina o escopo do seu contador redefinindo-o.

ol {
    list-style: none;
    counter-reset: number;
}

Agora diga ao contador para aumentar em 1 para cada item da lista.

ol li:before {
    counter-increment: number; 
}

Por fim, exiba o contador usando um pseudoelemento combinando-o com um decimal.

ol li:before {
    content: counter(number) ". "; 
}