Kas yra pseudoelementas?

CSS pseudo-element'as yra raktinis žodis, kuris pridedamas prie selektoriaus ir leidžia stilizuoti tam tikrą elemento dalį be aiškaus papildomų DOM elementų kūrimo.

Dažniausiai naudojami pseudo-elementai:

• ::before: įterpia generuotą turinį prieš pasirinktą elemento turinį.
• ::after: įterpia generuotą turinį po pasirinktą elemento turinio.
• ::first-line: taiko stilių pirmai eilutei bloko elemento.
• ::first-letter: taiko stilių pirmam raidei bloko elemento.
• ::selection: taiko stilių daliai elemento, kurią pasirinko naudotojas (pvz., teksto pažymėjimas pelės žymekliu).
• ::placeholder: taiko stilių į <input> arba <textarea> laukelių vietos užpildymo tekstą.

Pavyzdys naudojant ::before ir ::after:

div::before {
  content: "Prieš: "; // Būtina savybė content
  spalva: mėlyna;
}

div::after {
  content: " Pabaiga"; // Būtina savybė content
  spalva: raudona;
}

Pavyzdys naudojant ::first-line ir ::first-letter:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Pseudo-elementai naudingi pridėti dekoratyvius elementus, generuoti turinį, stilizuoti teksto dalis ir atlikti kitus uždavinius, supaprastindami HTML struktūrą. Istoriškai jie prasidėdavo vienu dvitaškiu (:), tačiau CSS3 specifikacija įvedė du dvitaškius (::) pseudo-klasėms (:hover, :focus) ir pseudo-elementams atskirti, nors vienas dvitaškis (:) vis dar palaikomas daugumos naršyklių senesniems pseudo-elementams. Rekomenduojama naudoti ::.