Fungsi Property CSS Counters

CSS Counters adalah Property CSS yang berfungsi untuk membuat penomoran pada elemen HTML secara otomatis. Pada dasarnya kita membuat nomor pada setiap daftar elemen seperti, artikel, gambar, atau daftar isi dengan cara manual. Nah di sini saya akan memberikan tips untuk teman-teman DUMET School cara memberikan penomoran secara otomatis pada setiap elemen yang ingin kita berikan nomor. Untuk membuat penomoran secara otomatis ini saya menggunakan bantuan CSS pseudo-elemen dan property CSS Counters. Dengan menggunakan CSS Counters ini kita dapat memberikan penomoran secara otomatis secara urut dan nomor akan di perbarui sebanyak elemen yang di tambahkan atau di hapus. CSS Counter memiliki 2 property yaitu :

- Counter-reset

- Counter-increment

Cara menggunakannya sangat mudah sekalia, berikut contohnya :

Pertama kalian bisa buat struktur HTML nya seperti gambar di bawah ini :

Dan CSS nya berikut ini :

Dan hasilnya :

See the Pen WbPXgv by Dumet_School (@dumet_school) on CodePen.

Nah itulah cara membuat penomoran secara otomatis menggunakan Property CSS Counters, cukup mudah ya, sekian dulu tutorial dari saya sampai ketemu di tutorial berikutnya. Terima Kasih.