función counters() de CSS

definición y uso

CSS counters() la función devuelve el valor actual del contador nombrado y el contador anidado en forma de cadena.

en este caso, usamos counters() la función inserta una cadena entre contadores de niveles anidados diferentes.

instancia

ejemplo 1

en este caso, usamos counters() la función inserta una cadena entre contadores de niveles anidados diferentes (un punto):

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

prueba por tu cuenta

ejemplo 2

establecer el estilo del contador y configurar la cadena de conexión como "-":

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, "-", lower-alpha) " ";
}

prueba por tu cuenta

sintaxis de CSS

counters(countername, string, counterstyle)
valor descripción
countername

obligatorio. nombre del contador (igual al nombre utilizado en las propiedades counter-reset y counter-increment).

nota: los nombres son sensibles a mayúsculas y minúsculas.
string obligatorio. cadena de conexión. Puede contener cualquier cantidad de caracteres de texto.
counterstyle

opcional. estilo del contador (puede ser el valor de list-style-type, el nombre de @counter-style o la función symbols()).

el valor predeterminado es decimal.

detalles técnicos

versión: CSS3

soporte del navegador

Chrome Edge Firefox Safari Opera
soporte soporte soporte soporte soporte

páginas relacionadas

Tutoriales:Contador de CSS

Referencia:Atributo content de CSS

Referencia:Atributo counter-increment de CSS

Referencia:Atributo counter-reset de CSS

Referencia:Regla @counter-style de CSS

Referencia:Función counter() de CSS