Função counter() CSS

Definição e uso

counter() A função retorna o valor atual do contador especificado como uma string.

Exemplo

Exemplo 1

Crie um contador para a página (no seletor body). Aumente o valor do contador para cada elemento <h2> e adicione o texto "Capítulo X" antes de cada elemento <h2>:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Seção " counter(section) ": ";
}

Experimente você mesmo

Exemplo 2

Defina o estilo do contador:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Seção " counter(section, upper-roman) ": ";
}

Experimente você mesmo

Sintaxe CSS

counter(countername, counterstyle)
Valor Descrição
countername

Obrigatório. O nome do contador (igual ao nome usado nas propriedades counter-reset e counter-increment).

Atenção, os nomes diferenciam maiúsculas e minúsculas.
counterstyle

Opcional. Estilo do contador (pode ser o valor de list-style-type, o nome de @counter-style ou a função symbols()).

O valor padrão é decimal.

Detalhes técnicos

Versão: CSS3

Suporte do navegador

Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte

Páginas relacionadas

Tutorial:Contador CSS

Referência:Atributo content do CSS

Referência:Atributo counter-increment do CSS

Referência:Atributo counter-reset do CSS

Referência:Regra @counter-style do CSS

Referência:Função counters() do CSS