Čo je pseudo-prvok?

Pseudo-element v CSS je ključna beseda, ki se doda selektorju in omogoča stiliziranje določenega dela elementa brez eksplicitnega ustvarjanja dodatnih elementov DOM.

Najpogosteje uporabljeni pseudo-elementi so:

• ::before: Vstavi generirano vsebino pred vsebino izbranega elementa.
• ::after: Vstavi generirano vsebino za vsebino izbranega elementa.
• ::first-line: Uporabi stile na prvi vrstici blok elementa.
• ::first-letter: Uporabi stile na prvi črki blok elementa.
• ::selection: Uporabi stile na delu elementa, ki ga je uporabnik izbral (npr. pri označevanju besedila z miško).
• ::placeholder: Uporabi stile na besedilu nadomestnega besedila v poljih <input> ali <textarea>.

Primer uporabe ::before in ::after:

div::before {
  content: "Predpona: "; // Obvezna lastnost content
  barva: modra;
}

div::after {
  content: " Pripona"; // Obvezna lastnost content
  barva: rdeča;
}

Primer uporabe ::first-line in ::first-letter:

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

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

Pseudo-elementi so uporabni za dodajanje okrasnih elementov, generiranje vsebine, stiliziranje delov besedila in drugih nalog, kar poenostavi strukturo HTML. Zgodovinsko so se začeli z enim dvopičjem (:), vendar je specifikacija CSS3 uvedla dva dvopičja (::) za razlikovanje med pseudo-razredi (:hover, :focus) in pseudo-elementi, čeprav je en dvopičje (:) še vedno podprto v večini brskalnikov za stare pseudo-elemente. Priporočljivo je uporabljati ::.