Pengen tambah dekorasi quote besar di awal blockquote tanpa nambahin tag baru di HTML? Pengen huruf pertama paragraf jadi gede ala buku cerita anak (drop cap)? Pengen ikon kunci muncul otomatis sebelum text "Privasi"? Semua bisa dilakuin tanpa nyentuh HTML — pake pseudo-elements. Ditulis pake titik dua ganda :: (beda dari pseudo-class yang cuma :), dan dia ngeluarin "elemen virtual" yang dirender browser tapi gak ada di DOM.

🤔 Wajib content. Pseudo-element ::before dan ::after PASTI butuh property content — bahkan kalau cuma string kosong "". Lupa kasih = gak muncul sama sekali. Bug paling sering pemula CSS pake pseudo-element.

Pseudo-element yang umum:

• ::before — menambah konten sebelum isi elemen
• ::after — menambah konten sesudah isi elemen
• ::first-line — menggaya baris pertama teks
• ::first-letter — menggaya huruf pertama
• ::placeholder — menggaya placeholder input
• ::selection — menggaya teks yang diseleksi

/* Tambah ikon sebelum link */
a::before {
  content: "🔗 ";
}

/* Tambah dekorasi setelah heading */
h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: orange;
  margin-top: 8px;
}

/* Huruf pertama paragraf lebih besar */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

Penting: ::before dan ::after wajib punya properti content (bisa string kosong ""). Tanpa content, pseudo-element tidak akan muncul.

🎭 Analogi sehari-hari

Pseudo-element = stiker dekorasi yang ditempel di buku tanpa nyobek halaman. ::before = stiker di kiri, ::after = stiker di kanan. Tampak di buku tapi tidak ada di "isi asli" (HTML).

⚠️ Jebakan yang sering ditemui

• :: (double colon) untuk pseudo-element, : (single) untuk pseudo-class. Browser modern toleran tapi standar pakai ::.
• Lupa content: "" = ::before/::after TIDAK MUNCUL. Bug paling sering.
• ::before/::after TIDAK ada di replaced elements (<img>, <input>, <video>) — elemen ini punya rendering sendiri.
• Pseudo-element di accessibility tree? Modern browser kebanyakan ekspos — tapi screen reader treatment tidak konsisten. Jangan pakai untuk konten penting.
• ::placeholder styling terbatas — cuma color, font, opacity yang konsisten cross-browser.
• ::selection cuma terima: color, background-color, text-decoration. Limited.

🧪 Tebakan cepat — kenapa ::before ku gak muncul? Tanpa run, tebak hasil tiap kasus:

/* A */ .btn::before { color: red; }
/* B */ .btn::before { content: ""; color: red; }
/* C */ .btn::before { content: "→"; color: red; }
/* D */ img::before { content: "★"; }

Jawaban:

• A → TIDAK MUNCUL (lupa content, pseudo-element gak render)
• B → render kotak invisible (content kosong, masih ngambil tempat)
• C → render → merah ✓
• D → TIDAK MUNCUL (<img> adalah replaced element, gak punya pseudo-element)

Aturan: ::before/::after WAJIB punya content property — bahkan kalau cuma "". Lupa = bug paling sering pemula CSS pseudo-element.

TL;DR: Pseudo-element = elemen virtual yang dirender browser tapi gak ada di DOM. Pakai :: (ganda), bukan : (yang itu pseudo-class). ::before/::after WAJIB punya content (boleh "") — lupa = gak muncul. Gunanya: tambah dekorasi (ikon, divider, drop cap) tanpa kotor-kotorin HTML. Tidak jalan di replaced elements (<img>, <input>).