Contadores en CSS

Los contadores en CSS pueden ser especialmente útiles para hacer listas resumidas. Estos son, en esencia, variables mantenidas por CSS cuyos valores pueden ser incrementados por las reglas de CSS para rastrear cuántas veces se usan.

Veamos su uso con un ejemplo:

HTML
 

CSS
 

Resultado

 

Explicación

Contadores en CSS

counter-resetInicializa un contador que comienza en 0. Esta propiedad también se puede usar para cambiar su valor a cualquier número específico.
counter-incrementSe utiliza en el elemento que será contado.
counters(counter, string, style)Esta función puede recibir tres parámetros, el primero como el nombre del contador, el segundo puede incluir una cadena que viene después del contador y el tercero puede ser decimal o upper-roman( decimade forma predeterminada).

 

Puedes probar este código en nuestra herramienta:

Editor Online

También puede interesarte

Deja un comentario

Tu dirección de correo electrónico no será publicada.