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

Question

Accepted Answer

**Pseudo-elemen** (titik dua ganda `::`) menata *bagian* spesifik saka elemen, utawa **ngasilake konten** sing ora ana ing HTML — tanpa nambah markup ekstra. ## Kenapa iki penting ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` Properti `content` wajib diisi — tanpa iki, pseudo-elemen ora bakal ditampilake. Konten sing dihasilake dadi anak ing paling awal (`::before`) utawa paling akhir (`::after`) saka elemen. ## Bentuk dekoratif tanpa div ekstra ```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) */ } ``` Iki kerja klasik: nggambar panah, badge, overlay, garis dekoratif — njaga HTML supaya resik saka elemen murni visual. ## Pseudo-elemen liyane (menata bagian saka 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 */ ``` ## Siji titik dua vs rong titik dua ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` CSS3 ngandhet `::` kanggo bedakne pseudo-elemen saka pseudo-klas (browser isih nampa titik dua siji ing sing lawas kanggo kompatibilitas, tapi gunakake `::`). ## Cathetan aksesibilitas Konten sing dihasilake bakal dibaca dening sawetara screen reader — aja gawe informasi penting mung ing `::before`/`::after` (gunakake kanggo dekorasi), lan ikon dekoratif luwih apik ditinggalake saka pohon aksesibilitas. ## Kenapa iki penting Pseudo-elemen ngukum sampeyan nambah ikon, bentuk dekoratif (panah, pemisah), drop cap, lan counter murni ing CSS — ora perlu `

` utawa `` ekstra. Njaga markup semantik lan ngukum detail visual sing sugih, lan dadi dasar saka gaya sing resik lan bisa dimantena.