Muitos tipos de conteúdo são melhor representados como uma lista HTML. Para conteúdo de lista ordenada, como etapas de uma receita ou notas de rodapé de um artigo, o marcador também costuma conter informações. O CSS oferece várias maneiras de controlar os contadores em uma lista.
Listar estilos
Há uma ampla variedade de tipos de estilos de lista predefinidos que aceitam números, letras, algarismos romanos e muitos sistemas de contagem internacionais.
Além dos estilos compatíveis com navegadores, o W3C publicou Estilos de contador prontos, com suporte para 181 estilos adicionais em 45 sistemas de escrita.
Se essas opções não atenderem às suas necessidades, defina um @counter-style personalizado. Isso permite especificar símbolos personalizados, um prefixo e um sufixo, entre outras coisas.
Por padrão, o marcador de item é outside a lista, posicionado na frente dela e alinhado à direita. Também é possível posicionar o marcador de item dentro da lista com list-style-position: inside.
Contadores
Enquanto os estilos de lista controlam como os marcadores de itens são exibidos, os contadores permitem controlar os valores a serem mostrados. Para elementos de item de lista <li>, o navegador cria um contador chamado list-item, que é incrementado em 1 para cada item de lista encontrado.
Os contadores CSS mantêm uma contagem contínua do número de vezes que um elemento com um valor counter-increment correspondente definido é renderizado.
Para criar um novo contador, use counter-reset com um nome de contador e, opcionalmente, um valor inicial. Normalmente, isso é definido em um elemento pai que contém todos os elementos que serão contados.
Em seguida, adicione uma propriedade counter-increment a cada elemento que você quer contar.
Por fim, mostre o valor do contador usando a função counter().
Neste exemplo, queremos mostrar a contagem progressiva das notas de rodapé como o texto do link de cada uma delas. Como queremos um único contador para todo o documento, definimos counter-reset: note no corpo e incrementamos em cada link de nota de rodapé.
Você também pode ter vários contadores contando itens diferentes. No exemplo de notas de rodapé, e se você quisesse mostrar o índice da seção e do parágrafo em que a nota de rodapé está?
A contagem de seções pode ser criada no corpo usando counter-reset e incrementada em cada elemento <h2>. Queremos que a contagem de parágrafos seja redefinida para cada seção. Por isso, vamos usar counter-reset em elementos <h2> e incrementar em elementos <p>.
Por fim, combinamos os valores do contador na propriedade content.
a:after {
content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
font-size: small;
vertical-align: super;
}
Contadores aninhados
O que acontece quando você aninha uma lista dentro de outra? O contador list-item é inicializado para cada elemento <ul> ou <ol>, e o uso de counter() retorna apenas o número da contagem mais interna. Se quiser mostrar a contagem de cada um dos contadores aninhados, use a função counters(), que recebe um nome de contador e um separador.
li::marker {
content: counters(list-item, ".")
}
Contadores de inversão
Por padrão, os contadores (incluindo o contador list-item implícito para elementos <ol>) começam em 0 e aumentam em um para cada elemento. Isso significa que o primeiro será contado como 1. E se você quiser contar de trás para frente até 1?
Para fazer isso, adicione o atributo reversed ao <ol>. Se você estiver usando o estilo de lista padrão, os marcadores vão funcionar conforme o esperado. No entanto, se você estiver usando um contador personalizado, precisará definir counter-increment como um valor negativo e calcular o valor inicial do contador manualmente.