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.

25 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat