Mitä ovat näennäiselementit (pseudo-elements) kuten ::before ja ::after?

Question

Accepted Answer

**Näennäiselementti** (kaksoispiste `::`) muotoilee elementin tietyn *osan* tai **generoi sisältöä**, jota ei ole HTML:ssä — ilman ylimääräistä merkintää. ## ::before ja ::after — generoitu sisältö ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` `content`-ominaisuus on pakollinen — ilman sitä näennäiselementtiä ei hahmonnetaan. Generoitu sisältö on lapsi elementin aivan alussa (`::before`) tai lopussa (`::after`). ## Koristeelliset muodot ilman ylimääräisiä divejä ```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) */ } ``` Tämä on klassinen käyttö: nuolien, merkkien, peittävien kerrosten ja koristelinjojen piirtäminen — pitää HTML puhtaana puhtaasti visuaalisista elementeistä. ## Muut näennäiselementit (muotoile elementin osa) ```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 */ ``` ## Yksi vs kaksi kaksoispistettä ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` CSS3 esitteli `::` erottamaan näennäiselementit näennäisluokista (selaimet hyväksyvät edelleen yhden kaksoispistteen vanhoissa yhteensopivuuden vuoksi, mutta käytä `::`) ## Saavutettavuus Generoitu `sisältö` luetaan joidenkin ruudunlukuohjelmien toimesta — älä laita olennaista tietoa vain `::before`/`::after` -kohtiin (käytä sitä koristeluun), ja koristeikoni on parasta jättää pois saavutettavuuspuusta. ## Miksi se on tärkeää Näennäiselementit antavat sinulle mahdollisuuden lisätä kuvakkeita, koristemuotoja (nuolet, erottimet), alkukirjaimia ja laskureita puhtaasti CSS:ssä — ilman ylimääräisiä `

`-elementtejä tai ``-elementtejä. Ne pitävät merkintöjen semantiikasta kiinni ja mahdollistavat samalla runsaan visuaalisen yksityiskohdan; ne ovat puhdasta ja ylläpidettävää tyyliä.