Función counter() de CSS

Definición y uso

counter() La función devuelve el valor actual del contador especificado en forma de cadena.

Ejemplo

Ejemplo 1

Crear un contador para la página (en el selector body). Aumentar el valor del contador para cada elemento <h2> y agregar el texto "Capítulo X" antes de cada elemento <h2>:

body {
  counter-reset: sección;
}
h2::before {
  counter-increment: sección;
  content: "Sección " counter(sección) ": ";
}

Prueba por ti mismo

Ejemplo 2

Establecer el estilo del contador:

body {
  counter-reset: sección;
}
h2::before {
  counter-increment: sección;
  content: "Sección " counter(sección, upper-roman) ": ";
}

Prueba por ti mismo

Sintaxis de CSS

counter(countername, counterstyle)

Detalles técnicos

Soporte del navegador

Páginas relacionadas

Tutoriales:Contador de CSS

Referencia:Atributo CSS content

Referencia:Atributo CSS counter-increment

Referencia:Atributo CSS counter-reset

Referencia:Regla @counter-style de CSS

Referencia:Función counters() de CSS