Função counter
A função counter é utilizada para exibir o valor atual de um contador como conteúdo de um elemento. Essa função pode ser usada em conjunto com as propriedades counter-reset e counter-increment para criar uma contagem personalizada em seus layouts.
Exemplo:
/* Resetar o contador 'secaoContagem' para 1 */
.secao {
counter-reset: secaoContagem 1;
}
/* Incrementar o contador 'secaoContagem' para cada elemento '.item-secao' */
.item-secao {
counter-increment: secaoContagem;
}
/* Exibir o valor do contador como conteúdo do elemento */
.item-secao::before {
content: counter(secaoContagem);
}Ao utilizar esses recursos do CSS, você pode implementar numerações e contagens de forma simples e rápida, sem depender de código JavaScript.