Función CSS counter()
Funciones CSSEjemplo
Crear un contador en la página (en el selector body), incrementar el valor del contador de cada elemento <h3> y añadir el texto "Section valor del contador" antes de cada elemento <h3>:
body {
counter-reset: section; /*Restablecer el contador a 0*/
}
h3:before {
counter-increment: section; /*Incrementar el valor del contador*/
content: "Section " counter(section) ": "; /*Mostrar el contador*/
}
Pruébalo »
Definición y uso
La función counter() devuelve el valor actual del contador como una cadena.
El valor del contador se controla mediante el uso decounter-resetycounter-incrementoperación, aplicando la función counter() en content para mostrarlo en la página.
Versión compatible: CSS3
Soporte del navegador
| Función | |||||
|---|---|---|---|---|---|
| counter() | Soporte | Soporte | Soporte | Soporte | Soporte |
Sintaxis CSS
counter(countername, counterstyle)
| Valor | Descripción |
|---|---|
| countername | Obligatorio. El nombre del contador (el mismo nombre utilizado por las propiedades counter-reset y counter-increment). |
| counterstyle | Opcional. El estilo del contador (puede ser un valor de propiedadlist-style-typeCSS). |
Más ejemplos
Ejemplo
Establecer el estilo del contador:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section, upper-roman) ": ";
}
Pruébalo »
Ejemplo
Establecer contadores anidados:
ol {
counter-reset: section; /*Crear una nueva instancia de contador para cada elemento ol*/
list-style-type: none;
}
li:before {
counter-increment: section; /*Solo incrementar la instancia actual del contador*/
content: counters(section, ".") " "; /*Añadir valores separados por '.' para todas las instancias del contador*/
}
Pruébalo »
Otras extensiones