Wat is een pseudo-element?

Het pseudo-element in CSS is een sleutelwoord dat wordt toegevoegd aan een selector, waarmee een bepaald deel van het element gestileerd kan worden zonder expliciet extra DOM-elementen te creëren.

De meest gebruikte pseudo-elementen zijn:

• ::before: Voegt gegenereerde inhoud toe vóór de inhoud van het geselecteerde element.
• ::after: Voegt gegenereerde inhoud toe ná de inhoud van het geselecteerde element.
• ::first-line: Past stijlen toe op de eerste regel van een blokelement.
• ::first-letter: Past stijlen toe op de eerste letter van een blokelement.
• ::selection: Past stijlen toe op het deel van het element dat door de gebruiker is geselecteerd (bijvoorbeeld bij het markeren van tekst met de muis).
• ::placeholder: Past stijlen toe op de placeholder-tekst in <input>- of <textarea>-velden.

Voorbeeld van gebruik van ::before en ::after:

div::before {
  content: "Voorvoegsel: "; // Verplichte eigenschap content
  color: blue;
}

div::after {
  content: " Achtervoegsel"; // Verplichte eigenschap content
  color: red;
}

Voorbeeld van gebruik van ::first-line en ::first-letter:

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

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

Pseudo-elementen zijn handig voor het toevoegen van decoratieve elementen, het genereren van inhoud, het stylen van delen van tekst en andere taken, waardoor de HTML-structuur wordt vereenvoudigd. Historisch begonnen ze met één dubbele punt (:), maar de CSS3-specificatie heeft twee dubbele punten (::) geïntroduceerd om pseudo-klassen (:hover, :focus) en pseudo-elementen te onderscheiden, hoewel één dubbele punt (:) nog steeds door de meeste browsers wordt ondersteund voor oude pseudo-elementen. Het wordt aanbevolen om :: te gebruiken.