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
{
: ;
}
{
: ;
}
Pseudo-elemen (titik dua ganda ::) menata bagian spesifik saka elemen, utawa ngasilake konten sing ora ana ing HTML — tanpa nambah markup ekstra.
{
: ;
}
{
: ;
}
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.
.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.
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 */
.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 ::).
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.
Pseudo-elemen ngukum sampeyan nambah ikon, bentuk dekoratif (panah, pemisah), drop cap, lan counter murni ing CSS — ora perlu <div> utawa <span> ekstra.
Njaga markup semantik lan ngukum detail visual sing sugih, lan dadi dasar saka gaya sing resik lan bisa dimantena.