Apakah pseudo-elemen seperti ::before dan ::after?

Question

Accepted Answer

**Pseudo-elemen** (titik dua berganda `::`) menggayakan *bahagian* khusus sesuatu elemen, atau **menjana kandungan** yang tiada dalam HTML — tanpa menambah markup tambahan. ## Mengapa ini penting ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` Sifat `content` adalah wajib — tanpa itu, pseudo-elemen tidak akan dipaparkan. Kandungan yang dijana adalah anak di awal sangat (`::before`) atau akhir (`::after`) elemen. ## Bentuk hiasan 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: melukis anak panah, lencana, tindanan, garis hiasan — menjaga HTML bersih dari elemen visual semata. ## Pseudo-elemen lain (menggayakan bahagian 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 membezakan pseudo-elemen daripada pseudo-kelas (penyemak imbas masih menerima titik dua tunggal pada yang lama untuk keserasian, tetapi gunakan `::`). ## Nota kebolehcapaian Kandungan `content` yang dijana dibaca oleh beberapa pembaca skrin — jangan letakkan maklumat penting hanya dalam `::before`/`::after` (gunakannya untuk hiasan), dan ikon hiasan paling baik ditinggalkan keluar daripada pohon kebolehcapaian. ## Mengapa ini penting Pseudo-elemen membenarkan anda menambah ikon, bentuk hiasan (anak panah, pembahagi), topi jatuh, dan pembilang secara tulen dalam CSS — tiada `

` atau `` tambahan diperlukan. Mereka menjaga markup semantik semasa memungkinkan butiran visual yang kaya, dan ia adalah asas penggayaan yang bersih dan boleh diselenggara.