Membuat Penomoran List Berurutan dengan CSS

21/02/2018    Risman Hakim    1903     Website

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 :)

Web Design, HTML CSS, Tips dan Trik, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More