Como usar el contador counter() de css

Como usar el contador counter() de css

0
(0)

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 0 / 5. Votos: 0

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

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 Comments

Post A Comment