CSS Counter Part III

Hallo teman-teman pada kesempatan kali ini saya akan membahas cara penggunaan CSS Counter Part III. Sebelumnya pada materi CSS Counter Part I dan CSS Counter Part II sudah dibahas mengenai CSS Counter itu sendiri dan sudah dipraktekan.

Baca artikel sebelumnya :

– CSS Counter Part I

– CSS Counter Part II

Disini saya akan membuat css counter yang berbeda pada materi sebelumnya, kalau yang sebelumnya hanya penomoran standard dan sub-nomor kalau kali ini masih sama tentang penomoran cuman berbeda pada materi sebelumnya.

Baca artikel sebelumnya : CSS Counter Part I dan CSS Counter Part II

Oke agar lebih memahaminya langsung saja tanpa panjangan lebar lagi, pertama-tama seperti biasa siapkan text-editornya dan browsernya lalu ketik script HTML dibawah ini kedalam text-editor yang teman-teman gunakan :

<ol>
  <li>item</li>
  <li>item     
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item
        <ol>
          <li>item</li>
          <li>item</li>
          <li>item</li>
        </ol>
      </li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

Jika sudah simpan file htmlnya dan penamaan filenya terserah teman-teman intinya jangan lupa extensionnya harus .html, kemudian langkah selanjutnya teman-teman masukan script CSS dibawah ini dan jangan lupa extensionnya untuk css adalah .css :

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}

Jika script HTML dan CSS nya sudah silahkan teman-teman simpan dan jalankan di browser yang teman-teman gunakan. Jika sudah maka hasilnya pada browser akan menjadi seperti pada gambar dibawah ini :

Oke jika hasil yang didapat sudah seperti pada gambar diatas maka teman-teman dinyatakan telah berhasil dalam membuat CSS Counter Part III.

Sekian pembahasan singkat tentang penggunaan CSS Counter Part III ini semoga dapat bermanfaat bagi teman-teman. Dan jangan lupa tunggu part-part selanjutnya.

Terimakasih

Kategori