Homepage-Webhilfe Event-Banner

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.


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;
}
Vorschau

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;
}
Vorschau
Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen OK