Kalau nomor bab ditulis langsung di HTML ("Bab 1", "Bab 2"), tiap kali kamu sisipkan bab baru di tengah, semua nomor sesudahnya harus diganti satu per satu. CSS counter adalah penghitung yang dijalankan browser: dia menghitung elemen yang kamu tunjuk, lalu menampilkan angkanya di depan elemen itu. Kayak petugas di pintu masuk yang memencet alat hitung tiap ada orang lewat.
🧪 Tebakan cepat: daftar isi pakai CSS counter, lalu kamu sisipkan satu bagian baru di tengah. Nomor di bawahnya perlu kamu ubah gak? Tebak dulu, jawabannya ada di bagian "Tiga langkah: buat, naikkan, tampilkan".
Tiga langkah: buat, naikkan, tampilkan
HTML-nya cuma berisi judul, tanpa angka:
<div class="daftar-isi">
<h2>Pendahuluan</h2>
<h2>Dasar</h2>
<h2>Lanjutan</h2>
</div>
<style>
.daftar-isi {
counter-reset: bab;
}
.daftar-isi h2::before {
counter-increment: bab;
content: "Bab " counter(bab) ": ";
}
</style>
counter-reset: bab;ditaruh di elemen pembungkus. Baris ini membuat penghitung bernamababdan memulainya dari 0. Namanya bebas, kamu yang pilih.counter-increment: bab;menambah 1 ke penghitungbabtiap kali browser ketemu elemen ini. Karena ada dih2::before, tiap<h2>menambah satu.::beforeadalah pseudo-element: kotak kecil yang dibuat CSS tepat sebelum isi elemen. Dia cuma muncul kalau punyacontent.content: "Bab " counter(bab) ": ";mengisi kotak itu.counter(bab)adalah nilai penghitung saat itu, dan teks di dalam tanda kutip ditempel di depan dan belakangnya.
Hasilnya: "Bab 1: Pendahuluan", "Bab 2: Dasar", "Bab 3: Lanjutan". Jawaban tebakan: gak perlu. Browser menghitung ulang setiap kali, jadi bagian yang ditambah, dihapus, atau dipindah langsung dapat nomor yang benar.
Nama penghitungnya harus sama persis di counter-reset, counter-increment, dan counter(). Beda satu huruf, itu sudah penghitung lain.
Ganti gaya angkanya
counter() bisa diberi gaya angka sebagai isian kedua:
counter(bab, upper-roman)jadi I, II, III.counter(bab, lower-alpha)jadi a, b, c.counter(bab, decimal-leading-zero)jadi 01, 02, 03.
Tanpa isian kedua, angkanya biasa: 1, 2, 3.
⚠️ Jebakan yang sering ketemu
- Lupa
content. Penghitungnya tetap jalan, tapi::beforetanpacontentgak muncul, jadi angkanya gak kelihatan. counter-resetdi elemen yang diulang. Kalau ditaruh dih2sendiri, bukan di pembungkusnya, tiap judul mulai dari 0 lagi, jadi semuanya dapat angka 1.- Nama penghitung beda.
counter-reset: bablalucounter-increment: bagianitu dua penghitung yang gak saling kenal, dan angkanya gak jalan seperti yang kamu mau.
💡 Nomor bertingkat (1, 1.1, 1.2)? Pakai
counters(item, "."), dengan s. Kalau tiap<ol>di dalam<ol>punyacounter-reset: item,counters()menggabungkan semua tingkat dengan titik.
TL;DR: CSS counter itu penomoran otomatis tanpa JavaScript. counter-reset: nama di pembungkus membuat penghitungnya, counter-increment: nama di tiap elemen menaikkannya, dan content: counter(nama) di ::before menampilkannya. Pakai nama yang sama di ketiganya. Gaya angka bisa diganti, misalnya counter(nama, upper-roman).
