Šta je pseudo-element?

Pseudo-element u CSS je ključna reč koja se dodaje selektoru i omogućava stilizovanje određenog dela elementa bez eksplicitnog kreiranja dodatnih DOM elemenata.

Najčešće korišćeni pseudo-elementi su:

• ::before: Umeće generisani sadržaj pre sadržaja odabranog elementa.
• ::after: Umeće generisani sadržaj posle sadržaja odabranog elementa.
• ::first-line: Primenuje stilove na prvu liniju blok elementa.
• ::first-letter: Primenuje stilove na prvo slovo blok elementa.
• ::selection: Primenuje stilove na deo elementa koji je odabrao korisnik (npr. pri označavanju teksta mišem).
• ::placeholder: Primenuje stilove na tekst zamenika u poljima <input> ili <textarea>.

Primer korišćenja ::before i ::after:

div::before {
  content: "Prefiks: "; // Obavezno svojstvo content
  boja: plava;
}

div::after {
  content: " Sufiks"; // Obavezno svojstvo content
  boja: crvena;
}

Primer korišćenja ::first-line i ::first-letter:

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

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

Pseudo-elementi su korisni za dodavanje dekorativnih elemenata, generisanje sadržaja, stilizovanje delova teksta i drugih zadataka, pojednostavljujući HTML strukturu. Istorijski su počinjali sa jednim dvotačkom (:), ali CSS3 specifikacija je uvela dva dvotačke (::) za razlikovanje pseudo-klasa (:hover, :focus) i pseudo-elementa, iako je jedan dvotačka (:) i dalje podržan od većine pregledača za stare pseudo-elemente. Preporučuje se korišćenje ::.