Cara Membuat Penomoran dengan Nol pada Ordered List

Cara Membuat Penomoran dengan Nol pada Ordered List - Didalam HTML terdapat tag OL yang dapat kita gunakan untuk membuat list dengan nomor baik berupa angka maupun dengan lainnya, yang paling sederhana adalah biasanya list dibuat dengan nomor dan biasanya angka dimulai dari angka 1, namun pernahkan kalian membuat suatu penomoran pada list dan angka nya ditambahkan dengan angka nol, misalnya 01, 02, 03 ... ? Nah, kali ini saya akan bagikan tutorial sederhana yaitu Cara Membuat Penomoran dengan Nol pada Ordered List. Simak tutorial selengkapnya berikut ini.

Langkah 1 : Cara Membuat Penomoran dengan Nol pada Ordered List

Baik kita akan memulai untuk membuat list sederhana, silahkan kalian bisa sesuaikan konten nya sendiri atau bisa mengikuti sintak HTML seperti berikut ini untuk membuat listnya.

<body>
    <div id="wrapper">
        <ol id="zero">
            <li>Januari</li>
            <li>Februari</li>
            <li>Maret</li>
            <li>April</li>
            <li>Mei</li>
            <li>Juni</li>
            <li>Juli</li>
            <li>Agustus</li>
            <li>September</li>
            <li>Oktober</li>
            <li>November</li>
            <li>Desember</li>
        </ol>
    </div>
</body>

Langkah 2 : Cara Membuat Penomoran dengan Nol pada Ordered List

Setelah membuat list seperti diatas, langkah selanjutnya barulah kita akan membuat dan menambahkan angka nol untuk penomorannya dengan memanfaatkan sintak CSS3 berikut.

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
#wrapper {
    width: 300px;
    border: 2px solid #444;
    padding: 5px;
}
#zero {
    list-style-type: none;
    counter-reset: li;
}
#zero li {
    font-size: 28px;
    font-weight: 600;
}
#zero li:before {
    font-family: 'Fjalla One', sans-serif;
    counter-increment: li;
    content: counter(li, decimal-leading-zero) ". ";
    color: #EA2027;
}

Pada sintak CSS diatas kita telah set angka nol dengan memanfaatkan properti CSS yakni counter-reset, counter-increment dan juga content: counter(li, decimal-leading-zero). Nah, setelah semua sintak telah diketikan silahkan simpan filenya dengan nama index.html kemudian kalian bisa buka pada browser masing - masing dan lihat hasilnya. Maka hasil penomoran yang dibuat akan terlihat seperti gambar berikut.

Cara Membuat Penomoran dengan Nol pada Ordered List

Bagaimana, cukup mudah bukan Cara Membuat Penomoran dengan Nol pada Ordered List ? Baik, cukup sekian tutorial sederhana kali ini, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

21 Mei 2018

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