Coba kamu nulis dokumentasi atau e-book dengan banyak section. Tiap section dikasih nomor: "Bab 1: Pendahuluan", "Bab 2: Dasar", "Bab 3: Lanjutan". Kalo kamu hardcode nomor di tiap heading, terus tiba-tiba pengen sisipin bab baru di tengah — nomor harus di-update SEMUA satu-satu. Mimpi buruk maintenance. Solusinya: CSS Counters — penomoran otomatis yang browser hitung sendiri. Sisipin section baru? Nomor adjust otomatis. Tanpa JavaScript, tanpa hardcode.

Langkah penggunaan:

1. counter-reset — inisialisasi counter:

body {
  counter-reset: section;
}

2. counter-increment — tambah nilai counter:

h2::before {
  counter-increment: section;
  content: "Bagian " counter(section) ": ";
}

3. counter() — tampilkan nilai counter:

h2::before {
  content: counter(section) ". ";
}

Counter bertingkat dengan counters():

ol {
  counter-reset: item;
  list-style: none;
}

li::before {
  counter-increment: item;
  content: counters(item, ".") " ";
}

Hasilnya: 1, 1.1, 1.2, 2, 2.1, dst.

Format counter:

content: counter(section, upper-roman);   /* I, II, III */
content: counter(section, lower-alpha);   /* a, b, c */
content: counter(section, decimal-leading-zero); /* 01, 02 */

🎭 Analogi sehari-hari

Pernah liat petugas di pintu masuk acara pegang clicker yang dipencet tiap orang masuk? Tiap pencetan = +1, total kelihatan di display kecil. CSS Counters kerja persis sama — kamu kasih instruksi "tiap nemu elemen ini, +1", browser otomatis hitungin dan tampilkan. Berguna banget buat numbered list custom, table of contents, atau heading bertingkat (1, 1.1, 1.2, 2, 2.1) — semua tanpa hardcode angka di HTML, tanpa JavaScript.

⚠️ Jebakan yang sering ditemui

• Counter scope — counter-reset di parent baru reset, di descendant biasa kontinyu.
• counter() vs counters() — counter() single value, counters() join hierarchy (1.1, 1.2.3).
• Pseudo-element ::before butuh content — selalu kasih (bisa kosong "").
• Tidak bisa di-style nilai counter sendiri — cuma display value.
• reversed ordered list (<ol reversed>) atau pakai counter-reset: x var(--total).
• Counter increment per element — array of counters di selector untuk multi-counter.

TL;DR: CSS Counters = penomoran otomatis tanpa JS. Trio: counter-reset: nama (init), counter-increment: nama (tambah), content: counter(nama) (display di pseudo-element). counters(item, ".") untuk hierarchy (1, 1.1, 1.2). Format: upper-roman, lower-alpha, decimal-leading-zero. Cocok buat TOC, numbered section, custom list. Sisipin section baru? Nomor adjust otomatis — gak perlu update manual.