Contoare CSS (counter-reset, counter-increment, counter()) în 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;
}

Efect vizual în browser

Cuprinsul arată „1 Introducere”, „2 Instalare”, „2.1 Pe Windows”, „2.2 Pe Linux”, „3 Primii pași”, cu numerele în gri.

Greșeli frecvente

• Punerea counter-reset pe același element care are și counter-increment; contorul repornește de la zero la fiecare element și toate afișează 1.
• Folosirea contoarelor pentru informații importante; textul din content nu poate fi selectat, iar cititoarele de ecran îl tratează diferit. Pentru liste reale, <ol> rămâne alegerea de bază.
• Lipsa proprietății content pe pseudo-element; fără ea, ::before nu apare deloc.

Comenzi înrudite

• list-style și ::marker: Schimbă bulinele și numerele listelor (&lt;ul&gt;, &lt;ol&gt;): tipul, poziția, un simbol propriu sau culoarea lor.
• Pseudo-elemente (::before, ::after, ::placeholder): Creează elemente decorative virtuale în pagină fără HTML suplimentar sau stilizează părți specifice ale unui element.