Propriedade counter-increment

A propriedade counter-increment define a numeração automática de elementos, por exemplo, parágrafos ou cabeçalhos. É usada em conjunto com a propriedade counter-reset, os pseudoelementos after e before, a propriedade content, dentro da qual é usada a função counter. Para um melhor entendimento, recomendo ver os exemplos.

Sintaxe

seletor {
	counter-increment: nome [incremento] | none;
}

Valores

Valor	Descrição
nome	Nome do contador. Uma palavra comum (como o nome de uma classe ou id). É possível definir vários nomes, separando-os por espaço. Neste caso, vários contadores serão alterados simultaneamente.
incremento	Número inteiro positivo ou negativo. Parâmetro opcional.
`none`	Impede o incremento do contador para o seletor atual.

Valor padrão: none.

Exemplo

Vamos fazer com que os parágrafos sejam numerados automaticamente:

<div id="parent">
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: counter(test);
}

Exemplo

Suponha que, além da numeração, algum texto adicional seja adicionado. No nosso caso, № antes do dígito e um ponto depois:

<div id="parent">
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Exemplo

Vamos iniciar a numeração a partir do 10. Para isso definimos o valor inicial do contador como nove, ou seja, 1 a menos do que precisamos:

<div id="parent">
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
</div>

#parent {
	counter-reset: test 9;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Exemplo

Suponha que agora a numeração tenha um incremento de "2". Para isso, definimos o incremento como dois:

<div id="parent">
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* definimos o incremento como dois */
	content: "№" counter(test) ".";
}

Exemplo

No exemplo anterior, a numeração começou com dois, mas gostaríamos que começasse com um. Por que isso aconteceu? Porque counter-reset redefine o valor do contador para zero, e então counter-increment adiciona seu incremento: por padrão, um, por isso antes a nossa numeração começava com 1. Agora é adicionado dois - e a numeração começa com dois.

Para corrigir o problema, vamos definir o valor inicial do contador como -1 e agora a numeração começará com 1 e será incrementada em 2:

<div id="parent">
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
</div>

#parent {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

Veja também

a propriedade counter-reset,
que redefine o valor do contador para zero