Pseudoelemente

Pseudoelemente sind, wie Pseudoklassen auch, Erweiterungen für Selektoren. Mit Hilfe von Pseudoelementen ist es möglich, auf Elemente zuzugreifen, welche nicht direkt im HTML-Code notiert sind, jedoch in der visuellen Darstellung sichtbar sind. Gekennzeichnet werden Pseudoelemente mit zwei Doppelpunkten :: gefolgt von dem Namen des Pseudoelements.

Davor und danach

Mit Hilfe der Pseudoelemente ::before und ::after ist es möglich, auf den Inhalt eines Elements vor und nach dem eigentlichen notierten Inhalt zuzugreifen bzw. diesen zu erstellen. Beide Pseudoelemente werden im Zusammenhang mit der Eigenschaft content verwendet, mit welcher es möglich ist, einen Inhalt vor oder nach dem Inhalt einzufügen. Die Einfügung erfolgt dabei immer zwischen dem eigentlich notierten Inhalt und dem Start- bzw. Endtag. Innerhalb der Regelblöcke können neben der content-Eigenschaft auch noch weitere Eigenschaften notiert werden, welche sich auf den eingefügten Inhalt auswirken.

p::before
{
	content: "„";
	color: red;
}

p::after
{
	content: "“";
	color: red;
}

Buchstaben und Zeilen

Mit Hilfe des Pseudoelements ::first-letter können wir auf den ersten Buchstaben eines Textes zugreifen. Das Pseudoelement ::first-line wirkt sich auf die erste Zeile eines Textes aus. Dabei ist nicht die erste Zeile im HTML-Code gemeint, sondern die erste im Browser dargestellte Zeile. Die notierten Eigenschaften im Pseudoelement ::first-letter können von dem Pseudoelement ::first-line nicht überschrieben werden.

p
{
	font-size: 14px;
}

p::first-letter
{
	font-size: 18px;
	font-weight: bold;
}

p::first-line
{
	font-size: 16px;
}