Digital Transformation
CSS ::marker (Pseudo-element)
TL;DR: CSS ::marker adalah pseudo-element untuk menata bullet atau nomor list secara langsung tanpa trik list-style: none plus ::before image. Sejak 2023 dukungan browser modern sudah luas, sehingga marketer dan developer Indonesia bisa membangun list bermerek lebih ringkas dan minim JavaScript.
Apa itu CSS ::marker?
CSS ::marker adalah pseudo-element bawaan yang menargetkan bullet atau penomoran sebuah item list (<li>). Dulu, mendesain bullet warna brand harus menyembunyikan list-style asli lalu menempel ikon via ::before. Sekarang cukup tata ::marker dengan properti color, font-size, dan content. Pola ini berkerabat dengan praktik CSS Nesting yang juga merampingkan stylesheet komponen.
Properti yang Didukung
| Properti | Keterangan |
|---|---|
| color | Mengubah warna bullet atau nomor |
| font-size | Mengatur ukuran simbol marker |
| content | Mengganti glyph penanda dengan teks atau ikon |
| text-transform | Sebatas pada konten marker |
Beberapa properti seperti background dan padding belum berlaku di ::marker untuk menjaga konsistensi rendering antar browser.
Contoh Praktis
Pola yang sering dipakai untuk list bermerek di landing page Next.js:
.feature-list li::marker {
color: var(--brand-500);
font-size: 1.1em;
content: "\2022 ";
}
Pendekatan ini memangkas 1 elemen DOM per item dan menghilangkan ikon SVG kecil yang biasa dipasang via ::before. Praktik dokumentasi properti ini tersedia di MDN web docs ::marker.
Kenapa Penting?
Untuk marketer Indonesia yang sering membangun list fitur, FAQ, atau bullet di pricing page, ::marker mengurangi CSS bloat dan mempercepat audit visual brand. Per April 2026, browser engine Chromium, Firefox, dan WebKit semua mendukung properti dasarnya untuk produksi.
Pertanyaan Umum
Apakah ::marker bisa pakai ikon SVG?
Belum, tapi properti content menerima karakter Unicode dan emoji, sehingga banyak kasus glyph terpenuhi tanpa SVG.
Apa fallback untuk browser lama?
Browser yang tidak mendukung akan memakai list-style bawaan, jadi pola ini aman sebagai progressive enhancement.
Istilah Terkait