Pseudo-Elemente

Was sind Pseudo-Elemente?

Während mit Pseudo-Klassen Elemente angesprochen werden, die bestimmte Eigenschaften haben, werden mit Pseudo-Elementen bestimmte Elementbereiche angesprochen (z. B. „::first-line“, „::first-letter“) bzw. erzeugt (z. B. „::before“, „::after“).

Die Syntax von Pseudo-Elementen ist wie folgt:

Hinweis: Eine vollständig Liste der Pseudo-Elemente gibt es bei w3schools und SelfHTML!

Die Pseudo-Elemente „::first-line“ und „::first-letter“

Mit „::first-line“ kann die erste Zeile in einem Element und mit „::first-letter“ der erste Buchstabe in einem Element angesprochen werden:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Die Pseudo-Elemente „::before“ und „::after“

Mit „::before“ kann direkt vor einem Element und mit „::after“ direkt nach einem Element Inhalt eingefügt werden. Mit der CSS-Eigenschaft „content“ wird dabei der einzufügende Inhalt definiert:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Das Pseudo-Element „::selection“

Mit „::selection“ werden ausgewählte Elemente (z. B. mit dem Cursor markierter Text) angesprochen:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Pseudo-Element und CSS-Klassen

Auch Pseudo-Elemente können zusammen mit CSS-Klassen verwendet werden. Die Psuedo-Klasse wird dabei an die CSS-Klasse angehängt:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Abschlussübung

Als Abschlussübung kannst du die folgende Seite erstellen, bei welcher der gesamte Text eines Absatzes erst gut sichtbar wird, wenn er mit der Maus markiert wird:

Dazu folgende Hilfestellung:

  • Gebe den Absatzelementen einen hellgrauen Hintergrund und eine graue Schriftfarbe
  • Verwende das Pseudo-Element „::first-letter“, um den ersten Buchstaben eines Absatzes blau, größer („font-size: 24px;“) und fett darzustellen
  • Verwende das Pseudo-Element „::first-line“, um der jeweils ersten Zeile im Absatz eine schwarze Schriftfarbe zu geben
  • Verwende das Pseudo-Element „::selection“, um markierten Text mit einer schwarzen Schriftfarbe darzustellen

Die Lösung kannst du dir hier herunterladen:

Download
PseudoElement5.css
Cascading Style Sheet Datei 261 Bytes
Download
PseudoElement5.html
HTML Dokument 961 Bytes

Quellen