Propiedad counter-increment

La propiedad counter-increment establece la numeración automática de elementos, por ejemplo, párrafos o encabezados. Se utiliza junto con la propiedad counter-reset, los pseudoelementos after y before, la propiedad content, dentro de la cual se utiliza la función counter. Para una mejor comprensión, recomiendo ver los ejemplos.

Sintaxis

selector {
	counter-increment: nombre [incremento] | none;
}

Valores

Valor	Descripción
nombre	Nombre del contador. Una palabra común (como el nombre de una clase o id). Se pueden establecer varios nombres, separándolos con espacios. En este caso, se cambiarán varios contadores simultáneamente.
incremento	Número entero positivo o negativo. Parámetro opcional.
`none`	Prohíbe el incremento del contador para el selector actual.

Valor por defecto: none.

Ejemplo

Hagamos que los párrafos se numeren automáticamente:

<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);
}

Ejemplo

Supongamos que además de la numeración se añade algún otro texto. En nuestro caso, № antes del número y un punto después:

<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) ".";
}

Ejemplo

Comencemos la numeración desde 10. Para ello establecemos el valor inicial del contador en nueve, es decir, en 1 menos de lo que necesitamos:

<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) ".";
}

Ejemplo

Supongamos que ahora la numeración sea con un incremento de "2". Para ello, establecemos dos como incremento:

<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; /* establecemos dos */
	content: "№" counter(test) ".";
}

Ejemplo

En el ejemplo anterior, la numeración comenzó desde dos, pero nos gustaría que fuera desde uno. ¿Por qué sucedió esto? Porque counter-reset restablece el valor del contador a cero, y luego counter-increment añade su incremento: por defecto uno, por eso antes nuestra numeración comenzaba desde 1. Pero ahora se suma dos - y la numeración comienza desde dos.

Para solucionar el problema, establezcamos el valor inicial del contador en -1 y ahora la numeración comenzará desde 1 y se incrementará en 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) ".";
}

Véase también

la propiedad counter-reset,
que restablece el valor del contador a cero