Funzione counter() CSS

Definizione e uso

counter() La funzione restituisce il valore corrente del contatore specificato come stringa.

Esempio

Esempio 1

Creare un contatore per la pagina (nel selettore body). Aumentare il valore del contatore per ogni elemento <h2> e aggiungere il testo "Capitolo numero" prima di ogni elemento <h2>:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Sezione " counter(section) ": ";
}

Prova personalmente

Esempio 2

Impostare lo stile del contatore:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Sezione " counter(section, upper-roman) ": ";
}

Prova personalmente

Sintassi CSS

counter(countername, counterstyle)
Valore Descrizione
countername

Obbligatorio. Il nome del contatore (uguale al nome utilizzato negli attributi counter-reset e counter-increment).

Attenzione, i nomi sono sensibili alle maiuscole.
counterstyle

Opzionale. Stile del contatore (può essere il valore di list-style-type, il nome di @counter-style o la funzione symbols()).

Il valore predefinito è decimale.

Dettagli tecnici

Versione: CSS3

Supporto del browser

Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto

Pagine correlate

Lezione:Contatore CSS

Riferimento:Proprietà content CSS

Riferimento:Proprietà counter-increment CSS

Riferimento:Proprietà counter-reset CSS

Riferimento:Regola @counter-style CSS

Riferimento:Funzione counters() CSS