Apa itu pseudo-element seperti ::before dan ::after?

Question

Accepted Answer

A **pseudo-element** (double colon `::`) styles a specific *part* of an element, or **generates content** that isn't in the HTML — without adding extra markup. ## ::before dan ::after — konten yang dihasilkan ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` The `content` property is mandatory — without it, the pseudo-element doesn't render. The generated content is a child at the very start (`::before`) or end (`::after`) of the element. ## Bentuk dekoratif tanpa div tambahan ```css .tooltip::after { content: ""; /* empty but present → creates a box */ position: absolute; border: 8px solid transparent; border-top-color: black; /* a CSS triangle (tooltip arrow) */ } ``` Ini adalah penggunaan klasik: menggambar panah, lencana, overlay, garis dekoratif — menjaga HTML tetap bersih dari elemen yang murni visual. ## Pseudo-element lainnya (style bagian dari elemen) ```css p::first-line { font-weight: bold; } /* the first rendered line */ p::first-letter { font-size: 3em; } /* drop cap */ ::selection { background: yellow; } /* highlighted/selected text */ input::placeholder { color: gray; } /* placeholder text */ ``` ## Satu vs dua titik dua ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` CSS3 memperkenalkan `::` untuk membedakan pseudo-element dari pseudo-class (browser masih menerima single colon pada yang lama untuk kompatibilitas, tetapi gunakan `::`) ## Catatan aksesibilitas Generated `content` dibaca oleh beberapa screen reader — jangan letakkan informasi penting hanya di `::before`/`::after` (gunakan untuk dekorasi), dan ikon dekoratif terbaik dibiarkan keluar dari pohon aksesibilitas. ## Mengapa ini penting Pseudo-element memungkinkan Anda menambahkan ikon, bentuk dekoratif (panah, pembagi), drop cap, dan penghitung murni dalam CSS — tidak ada `

`s atau ``s tambahan. Mereka menjaga markup tetap semantik sambil memungkinkan detail visual yang kaya, dan mereka adalah andalan styling yang bersih dan mudah dirawat.