Contador de CSS () Función
Ejemplo
Cree un contador para la página (en el selector de cuerpo). Incremente el valor del contador para cada elemento <h2> y agregue el texto "Sección < valor del contador >:" antes de cada elemento <h2>:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La función counter() devuelve el valor actual del contador nombrado, como una cadena.
Versión: | CSS3 |
---|
Compatibilidad con navegador
Function | |||||
---|---|---|---|---|---|
counter() | Yes | Yes | Yes | Yes | Yes |
Sintaxis CSS
counter(countername,
counterstyle)
Value | Description |
---|---|
countername | Required. The name of the counter (which is the same name used for the counter-reset and counter-increment properties) |
counterstyle | Optional. The style of the counter (can be a list-style-type value) |
Más ejemplos
Ejemplo
Establecer el estilo del contador:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section,
upper-roman) ": ";
}
páginas relacionadas
Referencia CSS: propiedad de contenido
Referencia de CSS: propiedad de contraincremento
Referencia de CSS: propiedad de restablecimiento de contador