1. Startseite
2. CSS
3. Pseudoelemente

Pseudoelemente

Während die klassischen Selektoren auf das selektierte Element beschränkt sind, können wir mit "Pseudoelementen" zusätzlichen "Content" erschaffen, der nicht im HTML-Elementbaum steht.

Das bedeutet, dass dieser "Content" zwar vom Browser gerendert wird, aber nicht in dem "DOM" dargestellt wird und auch nicht das HTML-Dokument ändert. "Pseudoelemente" dürfen nicht mit "Pseudoklassen" verwechselt werden. "Pseudoklassen" werden verwendet, um Elemente mit einer bestimmten Eigenschaft zu selektieren. "Pseudoelemente" hingegen erweitern bestimmte Elemente oder Bereiche die im "DOM" nicht existieren. "Pseudoelemente" werden mit doppeltem Doppelpunkt geschrieben, um von den "Pseudoklassen" zu unterscheiden, die bekanntlich mit einfachem Doppelpunkt geschrieben werden. Dabei ist der doppelte Doppelpunkt nicht mal erforderlich, weil moderne Browser auch die Schreibweise mit einfachem Doppelpunkt verstehen und der Internetexplorer den doppelten Doppelpunkt in einigen Versionen eh nicht versteht.

::first-line

Das Pseudoelement "::first-line" wird verwendet, um die erste Zeile eines Textes anzusprechen.

Wenn wir nun auf unser <div>-Bereich zugreifen, in dem genug Text steht, das er über eine Zeile hinaus geht, dann können wir mit dem Pseudoelement "::first-line" die erste Zeile des Textes Verändern, ohne das der Rest des Textes davon beeinflusst wird.

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

::first-letter

Das Pseudoelement "::first-letter" wird verwendet, um den ersten Buchstaben eines Textes anzusprechen. Betrachten wir wieder den <div>-Bereich und verändern den ersten Buchstaben des Textes.

div::first-letter {
 color: blue;
 font-size: 3rem;
}

::before & ::after

Die Pseudoelemente "::before" und "::after" können genutzt werden, um zusätzlichen Content innerhalb eines Elementes aber vor oder nach dem eigentlichen Inhalt hinzuzufügen.

Wir wenden beide Pseudoelemente auf den <div>-Bereich an.

div::before {
 content: 'Pseudoelement before! ';
}
div::after {
 content: ' Pseudoelement after!';
}

Der zusätzliche Inhalt ist deutlich zu erkennen.

Anstelle des Textes kann die Eigenschaft "content" auch ein Bild von einer URL wiedergeben.

div::before {
 content: url(Pfad zum Bild);
}