Fungsi dan kegunaan counter pada CSS

Counter CSS pada dasarnya adalah variable yang digunakan untuk penomoran, dan nilai dari counter bisa

Kegunaan CSS counter

Counter CSS pada dasarnya adalah variable yang digunakan untuk penomoran, dan nilai dari counter bisa ditambahkan dengan aturan css. Counter membiarkan Anda menyesuaikan tampilan konten berdasarkan penempatannya dalam dokumen.

Penomoran otomatis dengan counter

Counter css seperti variable. Nilai-nilai variabel dapat bertambah dengan aturan css (yang akan melacak berapa kali mereka digunakan).

Berikut properti counter css:

  • counter-reset – Mereset counter
  • counter-increment – Menaikan nilai counter
  • content – Sisipan konten yang dihasilkan
  • counter() atau counters() fungsi – Menambahkan nilai counter untuk elemen

Untuk menggunakan properti counter css, Anda haruss terlebih dahulu menggunakan properti counter-reset dan langkah pertama adalah mengatur ulang counter. 

Sebagai contoh “TesCounter” secara default diinisialisasi ke nilai 0 (nol) dan direset dengan properti counter-reset:

body {
    counter-reset: TesCounter;
}

Lalu penambahan nilai penomoran dengan properti counter-increment:

h2::before {
    counter-increment: TesCounter;
}

Lalu fungsi counter() atau counters() dalam konten digunakan untuk menampilkan konten dalam urutan tertentu

h2::before {
    content: “Belajar ” counter(TesCounter) “: “;
}

Berikut contoh lengkap:

body {
    counter-reset: TesCounter;
}
h2::before {
    counter-increment: TesCounter;
    content: “Belajar ” counter(TesCounter) “: “;
}

Nesting counter

Nesting counter bisa bersarang, counter bersarang biasanya digunakan untuk membuat sebuah subjudul.

body {
    counter-reset: merek;
}
h1 {
    counter-reset: submerek;
}
h1::before {
    counter-increment: merek;
    content: “Produk ” counter(merek) “. “;
}
h2::before {
    counter-increment: submerek;
    content: counter(merek) “.” counter(submerek) ” “;
}

Counter juga dapat digunakan untuk membuat list yang diuraikan, secara otomatis counter akan dibuat dalam elemen anak. Di sini kita menggunakan fungsi counters() untuk memasukkan string antara berbagai tingkat counter bersarang:

ol {
    counter-reset: item;
    list-style-type: none;
}
li::before {
    counter-increment: item;
    content: counters(item,”.”) ” “;
}

Daftar properti counter

PropertiKegunaanya
contentDigunakan dengan pseudo-element :: before dan :: after, untuk menyisipkan konten yang dihasilkan
counter-incrementMeningkatkan satu atau lebih nilai counter
counter-resetMembuat atau mengatur ulang satu atau lebih counter