Los contadores de CSS son "variables" mantenidas por CSS cuyos valores pueden incrementarse mediante reglas de CSS (para rastrear cuántas veces se usan). Los contadores le permiten ajustar la apariencia del contenido según su ubicación en el documento.
Numeración automática con contadores
Los contadores CSS son como "variables". Los valores de las variables se pueden incrementar mediante reglas CSS (que rastrearán cuántas veces se usan).
Para trabajar con contadores CSS usaremos las siguientes propiedades:
counter-reset- Crea o restablece un contadorcounter-increment- Incrementa un valor de contadorcontent- Inserta contenido generadoFunciones
counter()ocounters()- Agrega el valor de un contador a un elemento
Para usar un contador CSS, primero debe crearse con counter-reset.
El siguiente ejemplo crea un contador para la página (en el selector de cuerpo), luego incrementa el valor del contador para cada elemento <h2> y agrega "section <valor del contador>:" al comienzo de cada elemento <h2>:
Ejemplo:
Contadores anidados
El siguiente ejemplo crea un contador para la página (sección) y un contador para cada elemento <h1> (subsección). El contador section se contará para cada elemento <h1> con "section <valor del contador de sección>.", y el contador de "subsección" se contará para cada elemento <h2> con "<valor del contador de sección >.<valor del contador de subsecciones>":
Ejemplo:
Un contador también puede ser útil para hacer listas delineadas porque una nueva instancia de un contador se crea automáticamente en los elementos secundarios. Aquí usamos la función counters() para insertar una cadena entre diferentes niveles de contadores anidados:
Ejemplo:
Propiedades del contador CSS
| Propiedad | Descripción |
content | Usado con los pseudo-elementos ::before y ::after, para insertar contenido generado. |
counter-increment | Incrementa uno o más valores de contador. |
counter-reset | Crea o restablece uno o más contadores. |
counter() | Devuelve el valor actual del contador nombrado. |
Resumen
Los contadores CSS permiten crear variables que se pueden incrementar mediante reglas CSS. Se usan las propiedades counter-reset, counter-increment, content, y las funciones counter() o counters() para trabajar con contadores. Los contadores pueden ser anidados y son útiles para hacer listas delineadas. Se resumen las propiedades del contador CSS.
Traducido con 💚 desde W3Schools.com