Skip to content

kegunaan counter pada CSS

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;
}

CopyLighting

Editor Online

Lalu penambahan nilai penomoran dengan properti counter-increment:

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

CopyLighting

Editor Online

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

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

CopyLighting

Editor Online

Berikut contoh lengkap:

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

CopyLighting

Editor Online

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) ” “;
}

CopyLighting

Editor Online

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,”.”) ” “;
}

CopyLighting

Editor Online

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