CssProgettazione Web

Contare gli elementi

Possiamo numerare automaticamente gli elementi di un documento HTML tramite questi comandi:

  • counter-reset – crea una variabile contatore;
    counter-reset: capitoli;
  • counter-increment – incrementa il valore della variabile contatore;
    counter-increment: capitoli;

Facciamo un esempio di due contatori per capitoli e paragrafi:

body {
  counter-reset: capitoli;

h1 {
  counter-reset: paragrafi;
}

h1:before {
  counter-increment: capitoli;
  content: “Capitolo ” counter(capitoli) ” – “;
}

h2: before {
  counter-increment: paragrafi;
  content: counter(capitoli) “.” counter(paragrafi) ” “;
}