Você conhece o OL, não é? O que é que ele faz?
- Listas
- Ordenadas
Pois bem. Você sabia, que é possível utilizar esse recurso de contagem em outros elementos? Talvez você tenha até pensando em alterar o valor da propriedade display para list-item e com isso conseguir uma contagem em cada elemento.
Mas nada se compara com o poder de utilizar corretamente esse recurso direto no conteúdo dos pseudo-elementos :before e :after de dos elementos html.
Como funciona?
Primeiro você define um contexto para iniciar a contagem. Depois você aponta onde será o ponto de incremento. Em seguida, você irá capturar a contagem.
counter-reset: nomeDoContador;
counter-increment: nomeDoContador;
Ainda não entendeu?
Você já leu um documento onde tinham seções e subseções numeradas? Por exemplo:
1. Capítulo A
1.1 Capítulo Aa
1.2 Capítulo Ab
2. Capítulo B
2.1 Capítulo Ba
2.2 Capítulo Bb
Pois então, leia o conteúdo apresentado no resultado abaixo. Em seguida, observe atentamente a estrutura HTML e depois veja o CSS. Tente entender a aplicação.
Gostou?
Chegou a hora de você testar. Faça o seu código utilizando o CodePen e cole o link nos comentários!
Abraço!!!
