CSS Counter

CSS counter adalah variabel di CSS untuk menampilkan hitungan secara increament (berurutan) berdasarkan CSS rule (aturan) yang diberikan.

Penomeran otomatis CSS

Ingat, css counter ini adalah sebuah variabel.

Yang dibuat increament adalah variabel counter ini. Dengan urutan pembuatan variabel, yaitu:

• counter-reset, buat atau reset hitungan
• counter-increment, memberi nilai increment ke variabel
• content, menyisipkan konten ke element
• counter() atau counters(), menyisipkan nilai urutan variabel ke element html

Implementasi

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

h3::before {
  counter-increment: hitung;
  content: "Bab " counter(hitung) ": ";
}
</style>
<h2>Tutorial puntadewa:</h2>
<h3>Tutorial HTML</h3>
<h3>Tutorial CSS</h3>
<h3>Tutorial SEO</h3>

Keterangan:

• Buat dan reset variabel hitung dengan counter-reset
• Pilih element h3 dan sebelum konten dengan ::before
• Masukkan value increment ke hitung dengan counter-increment
• Masukkan content berupa Bab dan hitungan counter(hitung)

Hasilnya adalah:

Hitungan nested

Nested countent adalah hitungan dalam hitungan. Misal Bab 1, Bab 2. Didalamnya ada Sub Bab 2.1, Sub bab 2.2, dst.

Paham ya?

Di atas hitungan diberikan ke element heading h3, untuk subnya kita pakai h4.

<style>
body {
  counter-reset: hitung;
}
h3 {
  counter-reset: subhitung;
}
h3::before {
  counter-increment: hitung;
  content: "Bab " counter(hitung) ": ";
}
h4::before {
  counter-increment: subhitung;
  content: counter(hitung) "." counter(subhitung) " ";
}
</style>
<h2>Tutorial puntadewa:</h2>

<h3>Tutorial HTML</h3>
<h4>Menulis HTML</h4>
<h4>Menulis Tabel</h4>
<h4>Menulis Heading</h4>

<h3>Tutorial CSS</h3>
<h3>Tutorial SEO</h3>
<h4>Riset KW</h4>
<h4>Menulis konten</h4>
<h4>Mencari backlink</h4>

Hasilnya:

Property CSS Counter

Berikut ini adalah tabel daftar properti untuk counter css:

Properti	Keterangan
counter-reset	Buat atau reset hitungan
counter-increment	Mennetukan penambahan hitungan, misal: +1 atau +2,…
content	Memasukkan konten / teks dalam hitungan, dikombinasikan dengan: ::before and ::after (pseudo element)

Sekian tutorial css counter. Semoga dapat dipahami ya!