CSS-Pseudoelemente

Pseudoelemente ermöglichen es, bestimmte Teile eines Elements gezielt anzusprechen, z. B. den ersten Buchstaben oder die erste Zeile. Sie können auch zusätzlichen Inhalt hinzufügen, ohne die HTML-Struktur zu verändern.

Was ist ein Pseudoelement?

Pseudoelemente werden mit doppeltem Doppelpunkt (::) gekennzeichnet und zielen auf Teile ab, die keine separaten HTML-Elemente sind. Beispiele sind ::before, ::after, ::first-line oder ::selection.

Pseudo-element	Beschreibung
::before	Fügt Inhalt vor dem Element ein.
::after	Fügt Inhalt nach dem Element ein.
::first-line	Formatiert die erste Zeile des Elements.
::first-letter	Formatiert den ersten Buchstaben des Elements.
::selection	Formatiert den markierten Text.

Textformatierung mit Pseudoelementen

Mit Pseudoelementen kannst du Text individuell gestalten, z. B. den ersten Buchstaben oder die erste Zeile eines Absatzes hervorheben.

Im folgenden Beispiel ist die erste Zeile eines Absatzes fett und blau, während der erste Buchstabe größer und rot dargestellt wird.

Zusätzlichen Inhalt hinzufügen

Mit den Pseudoelementen ::before und ::after kannst du Inhalte hinzufügen, ohne das HTML zu ändern. Dies ist nützlich für Symbole, Dekorationen oder ergänzende Texte.

Tipps zur Verwendung von Pseudoelementen

Pseudoelemente können das Design bereichern und die Benutzererfahrung verbessern. Hier einige Tipps:

Gib bei der Verwendung von ::before und ::after immer einen 'content'-Wert an, sonst erscheinen sie nicht.
Verwende sie für Dekorationen oder Zusatzinfos, aber nicht für Hauptinhalte.
Achte darauf, dass die Stile der Pseudoelemente die Lesbarkeit des Hauptinhalts nicht beeinträchtigen.