Mik azok a pszeudo-elemek, mint a ::before és ::after?

Question

Accepted Answer

A **pszeudo-element** (dupla kettőspont `::`) egy elem egy adott *részét* stílusozza, vagy **tartalmat hoz létre**, amely nem szerepel a HTML-ben — további kód hozzáadása nélkül. ## ::before és ::after — létrehozott tartalom ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` A `content` tulajdonság kötelező — nélküle a pszeudo-element nem jelenik meg. A létrehozott tartalom az elem legelejére (`::before`) vagy végére (`::after`) kerül. ## Dekoratív formák további div-ek nélkül ```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) */ } ``` Ez a klasszikus felhasználás: nyilak, jelvények, fedések, dekoratív vonalak rajzolása — a HTML-t tisztán vizuális elemektől mentes tartva. ## Egyéb pszeudo-elemek (elem egy részének stílusozása) ```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 */ ``` ## Egy vagy két kettőspont ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` A CSS3 a `::` jellel különbözteti meg a pszeudo-elemeket a pszeudo-osztályoktól (a böngészők továbbra is elfogadják az egy kettőspontot a régieknél a kompatibilitas miatt, de a `::` karaktert használják) ## Akadálymentesítési megjegyzés A létrehozott `content` olvasható néhány képernyőolvasó által — ne helyezzenek az alapvető információkat csak a `::before`/`::after` mezőbe (használja dekoráció céljára), és a dekoratív ikonok legjobban az akadálymentesítési fán kívül maradnak. ## Miért fontos A pszeudo-elemek lehetővé teszik ikonok, dekoratív formák (nyilak, elválasztók), felbukkanó nagyok és számlálók hozzáadását pusztán CSS-ben — további `

` vagy `` nélkül. Megtartják a szemantikus kódot, miközben gazdag vizuális részleteket tesznek lehetővé, és az tiszta, fenntartható stílusozás alapjául szolgálnak.