Regra @counter-style do CSS

Definição e uso

CSS @counter-style As regras são usadas para definir estilos de contagem personalizados.

Quando o estilo pré-definido não atende às necessidades:@counter-style As regras permitem que você defina seu próprio estilo de contagem.

Exemplo

Definir estilo de contagem personalizado para a lista:

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
{}
ul {
  list-style: crown;
{}

Experimente pessoalmente

Sintaxe CSS

@counter-style countername {
  um ou mais descritores
{}

Valor do atributo

Valor Descrição
countername

Define o nome em maiúsculas e minúsculas do estilo do contador.

Nota: o nome do contador não pode ser: none, decimal, disc, square, circle, disclosure-open ou disclosure-closed.
system

Define o algoritmo que converte o valor inteiro do contador em uma string.

Se o system for configurado para: cyclic, numeric, alphabetic, symbolic ou fixed, é necessário o descritor symbols.

Se o system for configurado para: additive, é necessário o descritor additive-symbols.
symbols

Define os símbolos usados para marcar (pode ser uma string, imagem ou identificador personalizado).

Se o descritor system for configurado como cyclic, numeric, alphabetic, symbolic ou fixed, é necessário.

Símbolos UTF-8 do HTML.
additive-symbols

Define o tupla de adição do sistema aditivo.

O sistema de contador aditivo (como os números romanos) é composto por uma série de símbolos ponderados.

A lista de símbolos de contador, ordenados decrescentemente por peso e seus pesos não negativos, é descrita.

Se o descritor system for configurado como additive, é necessário.
negative Define o sinal de prefixo ou sufixo que deve ser adicionado quando o valor for negativo.
prefix Define o sinal de prefixo que deve ser adicionado ao sinal da representação.
suffix Define o sinal de sufixo que deve ser adicionado ao sinal da representação.
range

Define o intervalo de valores do estilo do contador.

Se o valor do contador estiver fora do intervalo, regride ao seu estilo alternativo.
pad

Se o sinal indicar que é necessário ter uma comprimento mínimo, use este descritor.

Por exemplo, se você quiser que o contador comece com 01 e continue com 02, 03, 04, etc., use o descritor pad.

Para contadores com valores maiores que o valor especificado de pad, o sinal será construído normalmente.
speak-as

Define como o sintetizador de voz deve ler o estilo do contador.

Por exemplo, para listas ordenadas, lê-se como números ou letras; para listas não ordenadas, lê-se como提示 de áudio.
fallback

Define o nome do contador de fallback quando o sistema não puder construir o sinal ou estiver fora do intervalo especificado.

Se o contador alternativo não for descrito ou o sistema alternativo não puder representar o valor do contador, regride ao estilo decimal.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que completa o suporte para a regra @.

Chrome Edge Firefox Safari Opera
91 91 33 17 77