Criando contador com CSS

Contadores são muito úteis quando por exemplo, vamos listar um conjunto de elementos, seja uma lista, um conjunto de títulos ou qualquer outro tipo de elemento que sejam agrupados de forma ordenada. É possível criar contadores apenas com CSS, isso mesmo, criar contadores dispensando linguagens de programação como javascript, então você não precisa ser um programador experiente para poder criar um contador usando apenas CSS.

Podemos usar a propriedade “counter” para tornar de maneira simples qualquer elemento em uma lista numerada, essa forma é muito parecida quando usamos a tag HTML <ol> (lista ordenada). Uma aplicação prática para isso é quando por exemplo criamos um site onde precisamos enumerar.

Abaixo temos um exemplo de uma aplicação prática do contador CSS

<style>
.bg-counter{
	background-color: #059862;
    padding: 20px
}
.bg-counter {
  counter-reset: section;
}
.bg-counter h2{
	color: #54f8bc;
}
.bg-counter h4{
	color: #cefdec
}
.bg-counter h4::before {
  counter-increment: section;
  content: "Seção " counter(section) ": ";
  color: #ffffff
}
</style>

<div class="bg-counter">

  <h2>Contador com CSS</h2>

  <h4>Primeiro item da lista</h4>
  <h4>Segundo item da lista</h4>
  <h4>Terceiro item da lista</h4>
  <h4>Quarto item da lista</h4>
  <h4>Quinto item da lista</h4>

</div>

Contadores CSS são parecidos com variáveis, são gerados e seus valores podem ser incrementados através de regras CSS. Através de um simples código conseguimos gerar números, incrementá-los e visualizá-los no conteúdo da página.

Navegadores que suportam contador CSS

• Google Chrome
• Firefox
• Edge
• Opera
• Safari

Basicamente vamos usar essas 3 propriedades do CSS:

counter-reset

counter-increment

counter()

Explicação:

• counter-reset: usada para inicializar o contador.
• counter-increment: incrementa o contador.
• counter(): função usada junto com o content para mostrar o valor do contador.

Vamos criar um código de exemplo:

<div class="content">
   <p>primeiro item</p>
   <p>segundo item</p>
   <p>terceiro item</p>
</div>

Criamos um elemento div com a classe ‘content’ e dentro desse elemento contém três parágrafos.

Nosso CSS:

.content{
   counter-reset: itens
}
p::before{
   content: counter(itens);
   counter-increment: itens;
}

Basicamente o código a cima faz o seguinte:

• Iniciamos o contador na classe ‘content’
• inserimos o contador e incrementos nos parágrafos

Conclusão

Podemos chegar a conclusão de que é super fácil utilizar contadores CSS para incrementar valores e exibí-los na página, esse tipo de recurso dispensa o uso de JavaScript, pois sua abordagem é extremamente simples sendo do nativa do CSS. Já coloque em prática e crie seu contador com CSS.