Ce este un pseudo-element?

Pseudo-elementul în CSS este un cuvânt cheie adăugat la un selector, care permite stilizarea unei părți specifice a elementului fără a crea explicit elemente suplimentare în DOM.

Cele mai utilizate pseudo-elemente sunt:

• ::before: Inserează conținut generat înainte de conținutul elementului selectat.
• ::after: Inserează conținut generat după conținutul elementului selectat.
• ::first-line: Aplică stiluri pe prima linie a unui element de bloc.
• ::first-letter: Aplică stiluri pe prima literă a unui element de bloc.
• ::selection: Aplică stiluri pe partea elementului selectată de utilizator (de exemplu, la evidențierea textului cu mouse-ul).
• ::placeholder: Aplică stiluri pe textul de placeholder în câmpurile <input> sau <textarea>.

Exemplu de utilizare a ::before și ::after:

div::before {
  content: "Prefix: "; // Proprietate obligatorie content
  color: blue;
}

div::after {
  content: " Suffix"; // Proprietate obligatorie content
  color: red;
}

Exemplu de utilizare a ::first-line și ::first-letter:

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

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

Pseudo-elementele sunt utile pentru adăugarea de elemente decorative, generarea de conținut, stilizarea părților de text și alte sarcini, simplificând structura HTML. În mod istoric, începeau cu un singur două puncte (:), dar specificația CSS3 a introdus două puncte (::) pentru diferențierea între pseudo-clase (:hover, :focus) și pseudo-elemente, deși un singur două puncte (:) este încă suportat de majoritatea browserelor pentru pseudo-elementele vechi. Se recomandă utilizarea ::.