Como usar el contador counter() de css

Como usar el contador counter() de css

Print Friendly, PDF & Email
Valora esta entrada

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

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.