Ce sunt pseudo-elementele cum ar fi ::before și ::after?

Question

Accepted Answer

Un **pseudo-element** (două-puncte duble `::`) stilizează o *parte* specifică a unui element, sau **generează conținut** care nu se află în HTML — fără a adăuga marcaj suplimentar. ## ::before și ::after — conținut generat ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` Proprietatea `content` este obligatorie — fără ea, pseudo-elementul nu se redă. Conținutul generat este un copil la început (`::before`) sau la sfârșit (`::after`) al elementului. ## Forme decorative fără div-uri suplimentare ```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) */ } ``` Acesta este utilizarea clasică: desenarea săgeților, insignelor, suprapunerilor, liniilor decorative — ținând HTML-ul curat de elemente pur vizuale. ## Alte pseudo-elemente (stilizare parte a unui element) ```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 */ ``` ## Unu versus doi doi-puncte ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` CSS3 a introdus `::` pentru a distinge pseudo-elementele de pseudo-clase (browserele acceptă în continuare doar doi-puncte pe cele vechi pentru compatibilitate, dar folosiți `::`.). ## Notă de accesibilitate Conținutul `content` generat este citit de unii cititori de ecran — nu puneți informații esențiale doar în `::before`/`::after` (utilizați pentru decorare), iar pictogramele decorative este mai bine să rămână în afara arborelui de accesibilitate. ## De ce este important Pseudo-elementele vă permit să adăugați pictograme, forme decorative (săgeți, separatoare), inițiale și numărătoare pur în CSS — fără `

`-uri sau ``-uri suplimentare. Menține marcajul semantic în timp ce permite detalii vizuale bogate, și sunt un element esențial al stilizării curate și ușor de menținut.