Contadores en CSS

CSS 12 febrero, 2019

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

La Coruña, España Correo contacto@pc-solucion.es