Kadang kamu mau menambah hiasan kecil di sebuah elemen, misalnya tulisan "Baru" di depan judul atau tanda panah di belakang link, tanpa mengubah HTML-nya. Bayangin menempel stiker di sampul buku: bukunya gak berubah, tapi tampilannya nambah. Pseudo-element adalah stiker itu: bagian tambahan dari sebuah elemen yang dibikin dan diberi gaya lewat CSS, ditulis pakai dua titik dua, misalnya h2::before.
🧪 Tebakan cepat:
p::before { color: red; }. Apa yang muncul di depan paragrafnya? Tebak dulu, jawabannya ada di bagian "Tempel teks di depan judul".
Tempel teks di depan judul
<h2>Fitur Kelas</h2>
<style>
h2::before {
content: "Baru ";
color: blue;
}
</style>
h2::beforeadalah selectorh2, dua titik dua, lalubefore. Artinya "bagian tambahan di awal isi<h2>".content: "Baru ";adalah isi stikernya: teks di dalam tanda kutip. Spasi sesudah Baru memberi jarak ke judulnya.color: blue;cuma mewarnai stikernya. Teks judulnya tetap.
Hasilnya, judulnya terbaca "Baru Fitur Kelas", dengan "Baru" berwarna biru. HTML-nya tetap cuma <h2>Fitur Kelas</h2>.
content wajib ada di ::before dan ::after. Tanpa content, stikernya gak dibuat sama sekali, walau gaya lainnya sudah ditulis. Itu jawaban tebakannya: gak ada apa-apa yang muncul. Mau stiker tanpa teks, misalnya garis hiasan? Tulis content: "";. Teksnya juga harus di dalam tanda kutip: content: "Baru";, bukan content: Baru;.
Pseudo-element yang sering dipakai
::beforemenambah isi di awal elemen.::aftermenambah isi di akhir elemen, misalnyaa::after { content: " »"; }menaruh tanda » di belakang link.::first-lettermemberi gaya ke huruf pertama, misalnya huruf besar di awal paragraf.::first-linememberi gaya ke baris pertama.
::first-letter dan ::first-line menggaya teks yang sudah ada, jadi gak butuh content.
Satu titik dua atau dua?
Pseudo-class, kayak a:hover, ditulis dengan satu titik dua dan bicara soal keadaan seluruh elemen: link yang lagi di-hover. Pseudo-element, kayak a::before, ditulis dengan dua titik dua dan bicara soal bagian dari elemen: stiker di depan isi link.
Browser masih menerima :before dengan satu titik dua demi kode lama, tapi penulisan yang benar ::before. Bentuk lain, kayak :before:, @before, atau #before, gak dikenal.
⚠️ Jebakan yang sering ketemu
- Teks tanpa tanda kutip.
content: →;diabaikan browser. Tuliscontent: "→";. - Pseudo-element di
<img>atau<input>. Elemen ini gak punya::beforedan::after, jadi stikernya gak muncul. - Info penting di
content. Sebagian pembaca layar melewatkannya, dan teksnya gak bisa diblok buat disalin. Pakai buat hiasan saja.
TL;DR: Pseudo-element adalah bagian tambahan dari elemen yang dibikin lewat CSS, ditulis pakai dua titik dua (::). ::before menempel isi di awal, ::after di akhir, dan keduanya wajib punya content dengan teks di dalam tanda kutip (boleh ""). ::first-letter dan ::first-line menggaya teks yang sudah ada. Satu titik dua itu pseudo-class (keadaan), dua titik dua itu pseudo-element (bagian).
