Cómo usar el contador counter() de css

Una vez en clase me preguntaron como podíamos hacer para numerar una lista ordenada igual que se hace en el word.

Iluso de mi en ese momento pensaba que sólo se podía hacer con javascript.

Un tiempo más tarde descubrí que css tiene la instrucción counter() que permite hacerlo con facilidad.

Aplican 3 tipos de instrucciones.

counter-reset:[nombrecontador]; 
/* inicaliza un nuevo contador o de existir lo resetea.*/

counter-increment:[nombrecontador] [valornumérico] /*de no indicarse nada el valor numérico se sobreentiende 1*/

content: counter([nombrecontador]);/*Para escribir el contenido*/

Como detalles importantes:

• Es importante que el contador inicialmente debe declararse. Personalmente me gusta la declaración  :root{counter-increment:contador;}
• La instrucción content típicamente debe usarse con el pseudoelemento ::before o ::after.

Ejemplo de uso de counter(). Encabezados numerados

En alguna ocasión se da el caso de tener contenido kilométrico.

En estos casos numerar los encabezados puede ser de utilidad. Si nos podemos ahorrar de escribir los números manualmente… mucho más pulido.

Dado el siguiente html.

<h2>un título h2</h2>
<h3>un título h2</h3>
<h3>otro título h2</h3>

<h2>un título h2</h2>
<h3>un título h2</h3>
<h3>otro título h2</h3>

<h2>un título h2</h2>
<h3>un título h2</h3>
<h3>otro título h2</h3>

y css

:root{
/*inicializar los contadores */
	counter-reset:principal;
	counter-reset:secundario;
}

h2{
	/*cada vez que iniciamos un h2 hay que resetear los h3*/
	counter-increment:principal;
	counter-reset:secundario;
}
	
h2::before{
	/*escribimos contador principal*/
	display:inline-block;
	width:32px;
	margin-right:.8em;
	content:counter(principal);
}

h3::before{
	display:inline-block;
	width:32px;
	margin-right:.8em;
	counter-increment:secundario;
        content:counter(principal)"."counter(secundario);
}

Compatibilidad con navegadores

Está soportado para explorer 8 y superiores.¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!