Styling Unordered List

Daftar tidak berurutan (ul) adalah elemen yang paling sering kita gayai ulang: menu navigasi, daftar fitur produk, daftar tag, hingga isi keranjang belanja semuanya dibangun dari elemen ini. Browser menggambarnya dengan penanda disc dan indentasi bawaan yang jarang cocok dengan desain halaman. Pada chapter pembuka section Tables dan Lists ini, kita mengenali gaya default ul, menyusun resep reset yang benar, membangun menu navigasi dari daftar, lalu memasang ikon custom dengan ::before — bekal yang kita pakai terus di sisa section ini.

Gaya Default ul #

Tanpa satu baris CSS pun, browser memasang tiga hal pada setiap ul:

Ketiganya ditulis pada user-agent stylesheet, lembar gaya bawaan browser. Ingat kembali dari section Typography: setiap li dirender dengan display: list-item, dan penandanya digambar di luar kotak konten karena list-style-position bernilai outside. Pengetahuan ini penting karena dua aspek itulah yang kita atur ulang saat merombak tampilan daftar.

Resep Reset Tiga Deklarasi #

Hampir semua restyling daftar dimulai dari resep yang sama:

.daftar-fitur {
  list-style: none;
  margin: 0;
  padding: 0;
}

1. list-style: none menghapus penanda. Shorthand ini sekaligus menyetel list-style-type, list-style-position, dan list-style-image.
2. margin: 0 menghilangkan jarak vertikal bawaan terhadap elemen di sekitarnya.
3. padding: 0 menghilangkan indentasi 40px. Tanpa baris ini penanda sudah hilang, tetapi daftar tetap tampak bergeser ke dalam.

Demo berikut menyandingkan ul tanpa sentuhan dan ul yang sudah menjalani reset tiga deklarasi:

Menu Navigasi dari ul #

Menu navigasi secara semantik memang daftar tautan, sehingga markup yang tepat tetap nav berisi ul. Setelah di-reset, item dijajarkan dengan flexbox dari section Flexbox:

.nav-utama {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.nav-utama a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
}

Perhatikan bahwa li pembungkusnya tidak perlu gaya khusus — cukup biarkan a yang menerima padding dan state hover dari section Pseudo-classes dan Pseudo-elements.

Ikon Custom dengan ::before #

Ketika penandanya harus berupa ikon — centang untuk daftar fitur, panah untuk daftar tautan — ::marker kurang fleksibel: property yang diterimanya terbatas pada warna dan properti font, sehingga ikon berlatar warna atau berukuran besar tidak bisa. Pola yang tepat memakai ::before:

.daftar-fitur li {
  position: relative;
  padding-left: 28px;
}

.daftar-fitur li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #1f6f54;
  font-weight: 700;
}

1. padding-left: 28px pada li membuka ruang tetap di kiri teks untuk ikon.
2. content: "✓" menggambar karakter centang sebagai anak maya pertama setiap li.
3. position: absolute; left: 0 dengan li ber-position: relative mematenkan ikon di kolom kiri, sehingga teks yang pindah baris tetap sejajar dengan baris pertamanya.

Demo berikut merangkai seluruh resep chapter ini: satu baris navigasi mini yang bersih dari bullet, plus daftar fitur dengan ikon centang:

Bila ikonnya lebih kompleks dari satu karakter, posisi ::before tersebut bisa pula diisi SVG data URI lewat background-image — variasi yang kita bedah pada chapter list-style.

Ringkasan #

ul datang dengan penanda disc, indentasi 40px, dan margin bawaan dari browser; resep list-style: none plus margin: 0 dan padding: 0 membersihkannya sepenuhnya. Untuk menu, reset ini dipadukan dengan flexbox; untuk ikon custom, ::before memberi kebebasan penuh yang tidak dimiliki ::marker. Chapter berikutnya membahas pasangannya: ol, daftar berurutan dengan penomoran yang bisa kita bentuk ulang mulai dari angka berawalan nol hingga nomor langkah yang menonjol.