Numerar elementos automaticamente com CSS

2d atrás

Com #CSS é possível criar contadores automáticos, que mostram a ordem do elemento.

No HTML, temos a seguinte estrutura:

<h2>Introdução</h2>
<h2>Início</h2>
<h2>Meio</h2>
<h2>Fim</h2>
<h2>Referências</h2>

Agora no CSS vamos criar um contador, com a propriedade counter-reset.

body {
	counter-reset: section;
}

counter-reset vai inicializar ou resetar o contador com o nome passado.

O próximo passo é mostrar o contador.

h2::before {
	counter-increment: section;
	content: "Seção " counter(section) ": ";
}

Com counter-increment informamos que o contador deve sempre incrementar 1 a cada h2. E com a propriedade content, conseguimos formatar como ele vai aparecer em tela.

Veja o resultado abaixo:

Comentários (0)