CSS TutorialLesson 40Preview gratis
CSS Counters
Lesson ini bagian dari CSS · Semua level
Ringkasan
CSS counters adalah penghitung otomatis yang disediakan CSS tanpa bantuan JavaScript. Kita membuat penghitung dengan counter-reset, menambah nilainya dengan counter-increment, lalu menampilkannya lewat counter() di dalam properti content pada pseudo-element. Teknik ini cocok untuk nomor bagian otomatis dan daftar bernomor.
Poin kunci
- counter-reset membuat penghitung sekaligus menentukan nilai awalnya.
- counter-increment menambah nilai penghitung setiap kali elemen yang cocok ditemukan.
- Nilai counter ditampilkan lewat counter(nama) pada properti content di ::before atau ::after.
- counter-reset bisa disetel ulang di elemen tertentu sehingga penghitungan dimulai dari awal lagi.
- Counters juga bisa dipakai menghitung jumlah elemen tertentu dalam satu wadah.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.