CSS counter

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

Properti	Kegunaanya
content	Digunakan dengan pseudo-element :: before dan :: after, untuk menyisipkan konten yang dihasilkan
counter-increment	Meningkatkan satu atau lebih nilai counter
counter-reset	Membuat atau mengatur ulang satu atau lebih counter