Menambahkan Nomor Urut di dalam DIV menggunakan CSS saja

Contoh Penambahan Nomor Urut dengan CSS

Agama

Air

Akuntansi

ARSITEKTUR

Artikel

Bahasa Indonesia

Bahasa Tips

USAHA

2

Agama

Air

Akuntansi

ARSITEKTUR

Artikel

Bahasa Indonesia

Bahasa Tips

USAHA

3

Agama

Air

Akuntansi

ARSITEKTUR

Artikel

Bahasa Indonesia

Bahasa Tips

USAHA

Berikut adalah contoh penggunaan CSS untuk menambahkan nomor urut di depan data pada elemen <div> dengan id "urut":

<h2>Contoh Penambahan Nomor Urut dengan CSS</h2> <style> #urut { counter-reset: nomor; /* Mengatur ulang nilai counter menjadi 0 */ list-style-type: none; /* Menghilangkan tanda bullet pada list */ } #urut > * { counter-increment: nomor; /* Menambahkan 1 pada nilai counter */ } #urut > *::before { content: counter(nomor) ". "; /* Menampilkan nomor urut */ } </style> <div id="urut"> <p>Agama</p> <p>Air</p> <p>Akuntansi</p> <p>ARSITEKTUR</p> <p>Artikel</p> <p>Bahasa Indonesia</p> <p>Bahasa Tips</p> <p>USAHA</p> </div>

Dalam contoh di atas, properti counter-reset digunakan untuk mengatur ulang nilai dari counter, sedangkan properti counter-increment digunakan untuk menambahkan nilai counter setiap kali elemen turunan dari <div> dengan id "urut" ditemukan. Properti content pada selector ::before digunakan untuk menampilkan nomor urut di depan setiap elemen.