Como usar a função counter() do CSS

Contadores CSS permitem que você automaticamente mostre a quantidade de elementos específicos em uma página. Você pode usá-los para contar automaticamente o número de itens em uma lista, por exemplo. 📝

Contadores são essencialmente variáveis mantidas pelo CSS, que podem ser incrementadas ou reduzidas utilizando regras de estilo como qualquer outra.

Utilizando contadores

A primeira coisa que você deve fazer é iniciar o contador em um seletor com a propriedade counter-reset.

Em seguida, o valor pode ser incrementado ou reduzido utilizando a propriedade counter-increment.

O valor atual de um contador pode ser mostrado utilizando as funcões counter() ou counters(), geralmente com o auxílio de um pseudo-elemento content.

div {
  counter-reset: mycounter; 
}

Uma vez inicializado, o valor do contador pode ser aumentado ou reduzido usando o counter-increment. Com a declaração seguinte, a variável counter mycounter será incrementada uma vez para cada elemento do tipo p.

p::before {
  counter-increment: mycounter;
}

Mostrando o contador

Agora para utilizarmos o contador da maneira em que definimos anteriormente, utilizaremos a função counter() dentro da propriedade content.

p::before {
  counter-increment: mycounter;
  content: "#" counter(mycounter) ": ";
}

E então, com a estrutura seguinte em HTML:

<div>
  <p>Olá!</p>
  <p>Como você está?</p>
  <p>Ótimo, obrigado!</p>
</div>

Obteremos o seguinte resultado:

Contadores aninhados

O contador CSS pode também numerar listas com multiplos níveis. Criaremos aqui um exemplo de uma lista ordenada em que cada item-pai pode ou não possuir itens-filhos. Utilizaremos a seguinte estrutura em HTML:

<section>
  <ol>
    <li>item</li>
    <li>
      item
      <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>  
      </ol>
    </li>
    <li>
      item
      <ol>
        <li>item</li>
      </ol>
    </li>
    <li>
      item
      <ol>
        <li>item
          <ol>
            <li>item</li>
            <li>item</li>
          </ol>
        </li>
        <li>item</li>
      </ol>
    </li>
    <li>item</li>
  </ol>
</section>

Como elementos do tipo ol já possuem geralmente uma pré-ordenação definida, precisamos incluir em nosso CSS o seguinte:

ol {
  list-style-type: none;
}

E em relação aos contadores, adicionaremos:

  ol {
    list-style-type: none;
    counter-reset: nestedcounter;
  }
  li::before {
    counter-increment: nestedcounter;
    content: counters(nestedcounter, ".") " ";
  }

Isso resultará em:

Espero que este artigo possa ajudá-lo a implementar contadores CSS em seus projetos. Caso você tenha sugestões ou dúvidas, não hesite em fazer contato. Até mais! 👋