`Contoare CSS (counter-reset, counter-increment, counter())` în CSS

Culori, fundaluri și text CSS2+

Numără automat elemente cu CSS și afișează numărul prin ::before, de exemplu „Pasul 1”, „Pasul 2” sau capitole 1.1, 1.2.

Sintaxă CSS

.pasi { counter-reset: pas; }
.pasi li { counter-increment: pas; }
.pasi li::before { content: "Pasul " counter(pas) ": "; }

/* numerotare imbricată 1.1, 1.2 */
li::before { content: counters(sectiune, ".") " "; }

Ce face `Contoare CSS (counter-reset, counter-increment, counter())`

Contoarele CSS sunt variabile numerice pe care browserul le crește pe măsură ce parcurge elementele. counter-reset creează (sau pune la zero) contorul, counter-increment îl crește, iar counter() îl afișează în proprietatea content a unui pseudo-element.

counters(nume, ".") afișează toate nivelurile unui contor imbricat, despărțite de textul dat, ca la cuprinsuri: 1, 1.1, 1.2, 2. Al doilea argument opțional al lui counter() alege stilul: upper-roman, lower-alpha etc.

Proprietatea counter-set setează contorul la o valoare fixă fără să creeze unul nou (Chrome 85, Firefox 68, Safari 17.2).

Valori uzuale

Valoare	Descriere
`counter-reset: nume [valoare]`	Creează contorul, implicit de la 0.
`counter-increment: nume [pas]`	Crește contorul cu 1 sau cu pasul dat.
`counter(nume, stil)`	Afișează valoarea curentă, opțional într-un stil de listă.
`counters(nume, "separator")`	Afișează toate nivelurile imbricate.
`counter-set: nume valoare`	Setează valoarea unui contor existent.

Exemple

Exemplul 1: Pașii unei rețete numerotați automat

Dacă adaugi un pas nou la mijloc, numerotarea se reface singură.

.reteta {
  counter-reset: pas;
  list-style: none;
  padding: 0;
}
.reteta li {
  counter-increment: pas;
}
.reteta li::before {
  content: "Pasul " counter(pas) ": ";
  font-weight: 700;
  color: #b45309;
}

Efect vizual în browser

Lista apare ca „Pasul 1: Spală cartofii.”, „Pasul 2: Taie-i cuburi.”, „Pasul 3: Pune-i la cuptor 40 de minute.”, cu „Pasul N:” îngroșat, în maro-portocaliu.

Exemplul 2: Cuprins cu numerotare pe niveluri

Fiecare <ol> imbricat creează un nivel nou al aceluiași contor.

.cuprins ol {
  counter-reset: capitol;
  list-style: none;
}
.cuprins li {
  counter-increment: capitol;
}
.cuprins li::before {
  content: counters(capitol, ".") " ";
  color: #64748b;
}