Was ist ein Pseudo-Element?

Das Pseudo-Element in CSS ist ein Schlüsselwort, das an einen Selektor angehängt wird und es ermöglicht, einen bestimmten Teil des Elements zu stylen, ohne explizit zusätzliche DOM-Elemente zu erstellen.

Die am häufigsten verwendeten Pseudo-Elemente sind:

• ::before: Fügt generierten Inhalt vor dem Inhalt des ausgewählten Elements ein.
• ::after: Fügt generierten Inhalt nach dem Inhalt des ausgewählten Elements ein.
• ::first-line: Wendet Stile auf die erste Zeile eines Blockelements an.
• ::first-letter: Wendet Stile auf den ersten Buchstaben eines Blockelements an.
• ::selection: Wendet Stile auf den vom Benutzer ausgewählten Teil des Elements an (z.B. beim Markieren von Text mit der Maus).
• ::placeholder: Wendet Stile auf den Platzhaltertext in <input>- oder <textarea>-Feldern an.

Beispiel für die Verwendung von ::before und ::after:

div::before {
  content: "Präfix: "; // Obligatorische content-Eigenschaft
  color: blue;
}

div::after {
  content: " Suffix"; // Obligatorische content-Eigenschaft
  color: red;
}

Beispiel für die Verwendung von ::first-line und ::first-letter:

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

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

Pseudo-Elemente sind nützlich, um dekorative Elemente hinzuzufügen, Inhalte zu generieren, Textteile zu stylen und andere Aufgaben zu vereinfachen, wodurch die HTML-Struktur vereinfacht wird. Historisch begannen sie mit einem Doppelpunkt (:), aber die CSS3-Spezifikation führte zwei Doppelpunkte (::) ein, um Pseudo-Klassen (:hover, :focus) und Pseudo-Elemente zu unterscheiden, obwohl ein einzelner Doppelpunkt (:) für ältere Pseudo-Elemente von den meisten Browsern weiterhin unterstützt wird. Es wird empfohlen, :: zu verwenden.