Membuat Style Pada List Nomor Dengan CSS

Hallo teman-teman DUMET School, pada tutorial kali ini kita akan coba membuat style yang menarik pada List Nomor yang ada di HTML menggunakan CSS. List Nomor di dalam HTML biasanya digunakan untuk membuat daftar list yang di tandai dengan angka 1, 2, 3, dan seterusnya. Di dalam HTML untuk membuat list yang berbentuk angka seperti itu kita dapat menggunakan Tag HTML <ol>, nah nanti kita akan coba memberikan style yang menarik pada list nomor tersebut. Baik kita akan coba langsung membuatnya saja ya teman-teman.

Pertama kalian bisa buat satu file dengan nama index.html, dan buat struktur HTML nya seperti gambar di bawah ini.

Kemudian untuk CSS nya kalian bisa ikuti seperti gambar di bawah ini.

Pada CSS di atas kalian bisa lihat, disitu saya menggunakan teknik CSS pseudo-element :before untuk membuat style pada List Numbered.

Maka kalau kalian jalankan hasilnya akan seperti berikut ini.