Como usar el contador counter() de css

Como 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);
}
lista numerada con contadores

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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.