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
{
: ;
}
{
: ;
}
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.
{
: ;
}
{
: ;
}
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.
.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.
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 memperkenalkan :: untuk membedakan pseudo-element dari pseudo-class (browser masih menerima single colon pada yang lama untuk kompatibilitas, tetapi gunakan ::)
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.
Pseudo-element memungkinkan Anda menambahkan ikon, bentuk dekoratif (panah, pembagi), drop cap, dan penghitung murni dalam CSS — tidak ada <div>s atau <span>s tambahan.
Mereka menjaga markup tetap semantik sambil memungkinkan detail visual yang kaya, dan mereka adalah andalan styling yang bersih dan mudah dirawat.