Fungsi Counters pada CSS

05/09/2019    Risman Hakim    34     Website

Fungsi Counters pada CSS - Didalam CSS terdapat counter yang dapat kita gunakan untuk pertambahan pada nilai, beberapa komponen yang harus diperhatikan ketika ingin menggunakan counter yaitu counter-reset (mereset counter), counter-increment (menaikan counter), content (menyisipkan konten) dan counter(penambahan nilai counter). Fungsi ini bisa kita manfaatkan ketika ingin membuat sebuah list dengan penomoran dan juga tutrunan.

Tentu counter ini bisa dipakai di elemen apapun pada HTML, seperti judul, paragraf dan lainnya. Berikut akan saya berikan contoh penggunaan counter pada tag <h3>

<style>
    body {
      counter-reset: section;
    }

    h3::before {
      counter-increment: section;
      content: "Judul " counter(section) ": ";
    }
</style>
</head>
<body>

    <h2>Module:</h2>
    <h3>HTML & CSS</h3>
    <h3>Bootstrap</h3>
    <h3>JavaScript</h3>

</body>

Fungsi Counters pada CSS

Dari contoh diatas, kita bisa dengan mudah membuat penomoran atomatis pada setiap elemen yang kita inginkan. Selain itu kita juga bisa membuat penomoran turunan pada list dengan fungsi counter. Contoh sebagai berikut.

<head>
    <style>
        ol {
          counter-reset: section;
          list-style-type: none;
        }
        li {padding: 5px 0px;}
        li::before {
          counter-increment: section;
          content: counters(section,".") ". ";
        }
    </style>
</head>
<body>
    <ol>
      <li>Digital Marketing</li>
      <li>Web Master   
      <ol>
        <li>HTML & CSS</li>
        <li>Bootstrap</li>
        <li>Javascript
        <ol>
          <li>jQuery</li>
          <li>Vue</li>
          <li>Angular</li>
        </ol>
        </li>
        <li>PHP & MySql</li>
      </ol>
      </li>
      <li>Graphic Design</li>
      <li>Flash Animation</li>
    </ol>
</body>

Fungsi Counters pada CSS

Baik, itulah pembahasan mengenai Fungsi Counters pada CSS, semoga pembahasan ini bermanfaat dan bisa menjadi baham belajar buat kalian yang sedang belajar tentang CSS. Selamat mencoba dan sampai jumpa di artikel selanjutnya :)

Web Design, HTML CSS

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