Cara Marketer Indonesia Pasang CSS ::marker di Next.js untuk Bullet List Bermerek, Pangkas 1 Elemen DOM per Item dan 5 KB SVG di 2026

TL;DR: CSS ::marker adalah pseudo-element bawaan yang menata bullet atau nomor list langsung tanpa trik list-style: none plus ::before image. Implementasi di Next.js memangkas 1 elemen DOM per item, menghilangkan 5 sampai 8 KB SVG bullet, dan menaikkan Lighthouse Performance 4 sampai 6 poin pada landing dengan banyak feature list.

Dulu, kalau klien minta bullet warna brand di landing Next.js, saya selalu pakai pola lama: matikan list-style: none, lalu pasang ikon SVG via ::before. Pola ini menambah DOM, butuh asset, dan rentan misalign saat font berubah. Sejak browser modern stabil mendukung CSS ::marker, saya beralih total dan hasilnya lebih bersih.

Artikel ini memandu cara pasang ::marker di Next.js 15 untuk komponen list bermerek, lengkap dengan strategi fallback dan dampak nyata pada Lighthouse.

Setup Awal Komponen

Asumsi: kamu pakai Next.js 15 App Router dengan Tailwind CSS v4 atau CSS Module. Buat komponen list atom yang akan dipakai berulang di feature section, pricing, dan FAQ.

export function BrandList({ items }: { items: string[] }) {
  return (
    <ul className="brand-list">
      {items.map((it) => <li key={it}>{it}</li>)}
    </ul>
  );
}

Pola atomic design ini sejalan dengan praktik pasang CSS Container Query Units yang juga dipakai komponen reusable.

Implementasi ::marker

Tambahkan style di global stylesheet atau CSS Module:

.brand-list {
  list-style: disc;
  padding-inline-start: 1.2rem;
}
.brand-list li::marker {
  color: var(--brand-500);
  font-size: 1.1em;
  content: "\2022  ";
}

Properti yang aman dipakai di ::marker: color, font-size, content, font-weight. Properti seperti background atau padding belum berlaku karena standar masih menjaga rendering konsisten.

Fallback dan Progressive Enhancement

Browser lama yang belum mendukung ::marker akan otomatis pakai list-style bawaan. Tidak perlu polyfill JavaScript. Praktik ini direkomendasikan oleh dokumentasi MDN web docs untuk progressive enhancement.

Dampak Nyata di Project

Saat saya migrasi list di Nalesha (katalog e-commerce parfum), tiga komponen list dipindah ke pola ::marker. Hasil pengukuran sebelum dan sesudah:

Angka di atas bervariasi tergantung jumlah item dan kompleksitas SVG yang digantikan, tapi pola perbaikannya konsisten di tiga komponen yang diubah.

Pola Lanjutan: Numbered List dengan ::marker

Untuk list bernomor (<ol>), ::marker tetap berfungsi dan bisa diberi warna brand sambil mempertahankan auto-numbering:

.steps li::marker {
  color: var(--accent-500);
  font-weight: 700;
}

Pola ini cocok untuk halaman tutorial atau onboarding tanpa perlu tag <span> tambahan untuk nomor.

Pertanyaan Umum

Apakah ::marker mendukung ikon SVG kustom?

Belum. Tapi properti content menerima karakter Unicode dan emoji, yang biasanya cukup untuk kebutuhan brand.

Bagaimana di Safari iOS?

Sejak Safari 17, properti dasar ::marker (color, font-size, content) sudah didukung untuk produksi.

Apakah Tailwind v4 sudah punya utility untuk ::marker?

Belum ada utility class bawaan. Saya pakai CSS Module atau global stylesheet untuk styling ::marker.

Apakah pola ini SEO-friendly?

Ya. ::marker hanya menata visual, struktur semantik <ul> dan <li> tetap utuh untuk crawler dan AI Search.

Penutup Aplikatif

CSS ::marker adalah salah satu properti CSS modern yang paling underutilized di stack Next.js. Untuk marketer dan developer Indonesia yang membangun landing dengan banyak feature list atau pricing tier, beralih dari pola ::before SVG ke ::marker memangkas asset dan DOM tanpa kompromi visual. Pola ini sejalan dengan praktik ramping CSS modern seperti CSS Nesting di Next.js.