Contadores em CSS: Simplificando a Exibição de Números

Os contadores em CSS são uma técnica útil para exibir números ou sequências ordenadas em elementos HTML, como listas ou seções. Ao utilizar apenas CSS para criar contadores, podemos evitar a necessidade de scripts adicionais em JavaScript, tornando a implementação mais simples e leve.

Aqui está um exemplo básico de como criar contadores apenas com CSS:

Código disponível

Assista ao vídeo Criando contadores apenas com CSS

No exemplo mostrado no vídeo, usamos a propriedade counter-reset para criar um contador chamado “title” e aplicamos esse contador as tags h2. Em seguida, utilizamos a pseudo-classe :before para inserir o valor do contador antes de cada título da seção. A propriedade counter-increment incrementa o valor do contador a cada item, e a propriedade content exibe o valor atual do contador seguido por um ponto.

Com essa abordagem, os números serão exibidos automaticamente para cada título, sem a necessidade de escrever código JavaScript adicional. Você pode personalizar ainda mais a aparência dos contadores, alterando as propriedades CSS, como cor, tamanho da fonte, estilo e posicionamento.

É importante ressaltar que a criação de contadores apenas com CSS é mais adequada para casos simples, onde a contagem é linear e não envolve lógica complexa. Se você precisar de funcionalidades mais avançadas, como redefinir o contador em determinados elementos ou lidar com contagens não lineares, pode ser necessário recorrer ao uso de JavaScript.

No entanto, para muitos cenários simples, a criação de contadores apenas com CSS oferece uma solução elegante, leve e fácil de implementar, permitindo que você exiba números ou sequências ordenadas de forma eficiente e estilizada em seus projetos web.