Kokie yra pseudo-elementai, tokie kaip ::before ir ::after?

Question

Accepted Answer

**Pseudo-elementas** (dvigubas dvitaškis `::`) pritaiko stilių konkrečiai elemento *daliai* arba **sukuria turinį**, kurio nėra HTML — be papildomos žymos. ## Kodėl tai svarbu ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` Turinio (`content`) savybė yra privaloma — be jos pseudo-elementas nebus išrenderuotas. Sugeneruotas turinys yra elemento pradžios (`::before`) arba pabaigos (`::after`) vaikas. ## Dekoratyvios formos be papildomų div elementų ```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) */ } ``` Tai klasinis panaudojimas: piešti rodykles, ženklelius, perdengimus, dekoratyvias linijas — paliekant HTML grynąjį ir be grynai vizualiniu elementų. ## Kiti pseudo-elementai (elemento dalies stilius) ```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 */ ``` ## Vienas vs du dvitaškiai ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` CSS3 pristatė `::` norėdama atskirti pseudo-elementus nuo pseudo-klasių (naršyklės vis dar priima viengubą dvitaškį senuose, tačiau naudokite `::`). ## Prieinamumo pastaba Sugeneruotas `content` kai kurie ekrano skaitytukai gali perskaityti — nepatalpinkite esminės informacijos tik `::before`/`::after` (naudokite dekoravimui), o dekoratyviniai piktogramai geriausia išbraukti iš prieinamumo medžio. ## Kodėl tai svarbu Pseudo-elementai leidžia grynai CSS jūs pridėti piktogramas, dekoratyvias formas (rodykles, skirtuvus), drop caps ir skaitiklius — nereikalingi papildomi `

` ar `` elementai. Jie palaiko žymėjimą semantiškai, o kartu leidžia turėti turtingą vizualinį detalumą ir yra švaraus, lengvai prižiūrimo stiliaus pamatas.