Cómo usar el contador counter() de css

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

lista numerada counter 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);
}

Cómo usar el contador counter() de css 1

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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *