Existem algumas formas bem interessantes de aplicação para os counter
. Uma é numerar páginas, a outra é numerar itens e sub-itens de uma lista por exemplo. Mas vc pode usar para numerar capítulos de um editorial e seus sub-títulos por exemplo... Outra aplicação simples seria para numerar divs
, como se elas fossem uma lista ordenada de divs
.
Numerando UL e LI
Primeiro veja esse modelo básico para entender o conceito.
Repare que nele eu inicio o counter
na UL
, e no ::after
desse UL
eu coloco o resultado dentro do content
. Depois disso eu usa o LI para fazer o incremento do valor do counter. Isso significa que eu vou "contar" quantas LI
existem no DOM
com CSS e plotar esse valor no content
da UL
.
Agora vc a parte de colocar o número da LI
. Para isso vc vai colocar no ::after
das LI o mesmo counter(teste)
, só que como agora ele está em cada LI
ele vai mostrar índice do próprio elemento.
Veja o código para entender melhor, deixei os comentários para vc entender melhor.
ul {
/* inicia o contador aqui */
counter-reset: teste;
}
ul::after {
/* vai pegar o que vier do counter-increment das LIs e colocar aqui nesse after */
content: counter(teste);
font-weight: bold;
color: red;
}
li {
/* vai contar quantas LI tem no DOM dentro dessa UL */
counter-increment: teste;
}
li::after {
/* coloca na LI o próprio número que ela tem no index */
content: " " counter(teste);
color: green;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
Lista Vazando o Escopo
Esse tipo de lista é interessante, pq ela "sangra o escopos" do pai e a ordem da lista é compartilhada. O que quero dizer é que temos aqui 3 OL
e mesmo assim a ordem da contagem é compartilhada entre todas as LI
como se a OL
fosse "ignorada". Isso acontece pq iniciamos o counter no body
, e não na OL
Repare que mesmo todas as OL
tendo algumas LI
dentro, a sequencia alfabética segue como uma coisa só da primeira LI
da primeira OL
até a última LI
da última OL
. Por exemplo, o segundo grupo de LI
s dentro da segunda OL
começa na letra D
e não na letra A
OBS: Eu usei OL
e LI
, mas poderiam ser DIV
s e P
s tranquilamente (mas não semanticamente)
body {
background: #333;
counter-reset: mega-step mini-step;
}
ol {
padding: 0;
}
ol li{
counter-increment: mini-step;
list-style:none;
}
ol li:before{
content:counter(mini-step, lower-alpha) " ";
background:darkred;
color:white;
padding:2px 5px;
margin: 4px;
font:14px/250% times new roman;
border-radius: 100%;
font-weight: bold;
}
section {
width: 20%;
float: left;
margin: 20px;
background: white;
counter-increment: mega-step;
padding: 5px;
position: relative;
}
section:before {
content: counter(mega-step, upper-roman);
background:white;
width:30px;
position: absolute;
left:0px; top:-20px;
text-align: center;
color:darkred;
font: bold 20px times new roman;
}
<section>
<ol>
<li>começa no A</li>
<li>LI 2 da OL 1</li>
<li>LI 3 da OL 1</li>
</ol>
</section>
<section>
<ol>
<li>Segue com D</li>
<li>LI 2 da OL 2</li>
<li>LI 3 da OL 2</li>
</ol>
</section>
<section>
<ol>
<li>LI 1 da OL 3</li>
<li>LI 2 da OL 3</li>
<li>Última li de 3 OL = I</li>
</ol>
</section>
Nesse exemplo eu usei upper-roman
para numerar as Sections com números em Romano (I) e lower-alpha
para ordenar as Kem ordem alfabética (a). Veja que o segundo argumento do counter
é o estilo usado para no contador.
content: counter(mega-step, upper-roman)
content:counter(mini-step, lower-alpha)
DICA: Aqui tem uma lista completa desse Estilos que vc pode usar no counter, são os mesmo usados tradicionalmente nas Listas Ordenadas e Não Ordenadas
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
Veja o exemplo de lista / sub-lista
Primeiro vc tem que "iniciar" o Counter
em todos os <ol>
, e remover o valor default da Lista Ordenada. Depois no <li>
vc faz o incremento do Counter
no Content
. O legal aqui é que vc tem toda a flexibilidade do CSS para customizar seus números etc. OBS: Deixei os comentário no código do CSS
ol {
counter-reset: section; /* inicia um contador com valor 0 nome de "section" */
list-style-type: none; /* remove o valor default da <ol> */
}
li::before {
counter-increment: section; /* inclui o contado "section" com incremento de 1 */
content: counters(section, "-") ": "; /* pega o valor do counter do pai e coloca um "-" depois da um espaço com os ": " e coloca o valor do counter do filho */
color: red;
font-size: 20px;
font-family: sans-serife;
}
.custom-counter {
margin: 0;
padding: 0;
}
<div>
<ol class="custom-counter">
<li><b>RESUMO DE ATIVIDADES</b>
<ol class="custom-counter">
<li><b>SUB ATIVIDADES</b></li>
<li><b>SUB ATIVIDADES</b></li>
</ol>
</li>
<li><b>COMENTÁRIOS</b>
<ol class="custom-counter">
<li><b>SUB COMENTÁRIOS</b></li>
<li><b>SUB COMENTÁRIOS</b></li>
</ol>
</li>
</ol>
</div>
Exemplo numerando divs
de 2 em dois como o incremento de 2 dentro do counter-increment
div {
width: 100px;
height: 100px;
border: 1px solid;
position: relative;
display: inline-block;
counter-increment: nDiv 2; /* começa o contador a partir de 2 e vai somando 2 a cada incremento */
}
div::before {
content: counter(nDiv); /* mostra o valor do contador */
position: absolute;
top: 5px;
left: 5px;
}
<div></div>
<div></div>
<div></div>
<div></div>
Aqui tem um exemplo de aplicação para fazer numeração de páginas:
@page {
size: A4;
margin: 70pt 60pt 170pt;
counter-increment: page;
@bottom-center {
content: "Page " counter(page);
}
}
Exemplo de como começar a contagem por um determinado número em uma determinada página.
@page { counter-increment: page } @page:first { counter-reset: page 9 }
A combinação de ambas as regras irá redefinir o contador para da primeira página para 9. Então, para cada página (incluindo a primeira), ela incrementará o contador. Isso resulta em um valor de contador de 10 para a primeira página, 11 para o segundo e assim por diante.
Fonte: https://www.tallcomponents.com/blog/css3-page-counter
Sobre o suporte dos browsers
Counter é uma propriedade relativamente antiga e amplamente aceita, até o IE8 já tem suporte para ela como vc pode consultar aqui: https://caniuse.com/#feat=css-counters
Referência e documentação
Aqui vc pode ler mais sobre o Counter
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters