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:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ic08d48ee974680e5/version/1488932022/image.png)
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:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ibe3741b0f5978991/version/1488932231/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/iad5db4c2ff841f68/version/1488932254/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/if98c324f9510a5dc/version/1488932278/image.png)
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:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ia824cda84308b180/version/1488932374/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i775e42b7d923bd51/version/1488932397/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i9ad2bda7dc76478b/version/1488932437/image.png)
Das Pseudo-Element „::selection“
Mit „::selection“ werden ausgewählte Elemente (z. B. mit dem Cursor markierter Text) angesprochen:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i787e5c375cf68b66/version/1488932575/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i6a4833ff404f7adf/version/1488932598/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ide769912a93f1f1c/version/1488932621/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/id37300271368a3b4/version/1488932636/image.png)
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:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i17430bdc3b788e18/version/1488932717/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/iaad45719f005a494/version/1488932738/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ib7757568b62da24a/version/1488932756/image.png)
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:
![](https://image.jimcdn.com/app/cms/image/transf/dimension=670x10000:format=png/path/s834d64c225dfb243/image/ib140a8c1c339b57b/version/1489015923/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=670x10000:format=png/path/s834d64c225dfb243/image/i4cf29f5893f327d3/version/1489015944/image.png)
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: