Membuat Penomoran List Berurutan dengan CSS
Membuat Penomoran List Berurutan dengan CSS - Didalam pembuatan list dengan HTML banyak sekali jenis yang bisa kita gunakan, misalnya list dengan style bulatan, kotak, angka romawi dan lain sebagainya dalam setiap penomorannya. Namun pernahkah kalian membuat list yang berbeda akan tetapi penomoran list tidak terputus ? Dengan bantuan CSS kita bisa membuat penomoran secara terus - menerus berurutan tanpa terputus walalupun listnya berbeda. Ingin tau seperti apa caranya ? berikut akan saya bagikan trik bagaimana Membuat Penomoran List Berurutan dengan CSS sekaligus saya akan praktekan cara membuatnya.
Langkah 1 : Membuat Penomoran List Berurutan dengan CSS
Baik, langusng saja kita mulai praktek untuk membuat penomoran pada list.
Seperti biasa, kita akan buat terlebih dahulu list - list yang akan diberikan penomoran secar berurutan dengan sintak HTML berikut ini.
<body>
<h1>List Menu :</h1>
<h2>Makanan</h2>
<ol class="continuous-list">
<li>Bakso</li>
<li>Soto</li>
<li>Ayam Goreng</li>
<li>Pecel</li>
<li>Sate</li>
<li>Bubur</li>
<li>Nasi Goreng</li>
</ol>
<h2>Minuman:</h2>
<ol class="continuous-list">
<li>Air Putih</li>
<li>Susu</li>
<li>Teh Manis</li>
<li>Kopi</li>
<li>Jus jeruk</li>
</ol>
<h2>Cemilan:</h2>
<ol class="continuous-list">
<li>Tahu Gejrot</li>
<li>Kacang Goreng</li>
<li>Jagung</li>
<li>Tempe</li>
</ol>
</body>
Silahkan kalian bisa membuat list lebih dengan kategori yang berbeda seperti pada contoh list diatas.
Langkah 2 : Membuat Penomoran List Berurutan dengan CSS
Setelah membuat list - list seperti diatas, jika kita lihat hasil sementara, maka secara default list akan terputus ketika pada kategori berbeda.
Selanjutnya, kita akan buat penomoran pada setiap kategori terus berurutan dengan sintak CSS berikut.
@import url('https://fonts.googleapis.com/css?family=Righteous');
body {
font-family: 'Righteous', cursive;
counter-reset: listCounter;
}
.continuous-list li {
list-style: none;
}
.continuous-list li::before {
content: counter(listCounter) " . ";
counter-increment: listCounter;
}
Nah, setelah sintak telah diketikan semua, silahkan simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya, maka akan terlihat list dengan penomoran berurutan tanpa terputus walaupun dengan kategori yang berbeda.
Bagaiman, cukup mudah bukan untuk membuat penomoran secara berurutan dengan bantuan CSS. Baik cukup sekian trik sederhana Membuat Penomoran List Berurutan dengan CSS, semoga bermanfaat :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
