Função counters() do CSS

Definição e uso

Definição e uso de CSS counters() A função retorna o valor atual do contador nomeado e do contador aninhado como string.

Aqui, usamos counters() A função insere uma string entre contadores de níveis diferentes.

Exemplo

Exemplo 1

Aqui, usamos counters() A função insere uma string entre contadores de níveis diferentes (um ponto):

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

Experimente você mesmo

Exemplo 2

Defina o estilo do contador e configure a string de conexão para "-":

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

Experimente você mesmo

Sintaxe CSS

counters(countername, string, counterstyle)
Valor Descrição
countername

Obrigatório. Nome do contador (o mesmo nome usado nas propriedades counter-reset e counter-increment).

Atenção: os nomes diferenciam-se por maiúsculas e minúsculas.
string Obrigatório. String de conexão. Pode conter qualquer quantidade de caracteres de texto.
counterstyle

Opcional. Estilo do contador (pode ser o valor de list-style-type, nome do @counter-style ou 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 counter() do CSS