8.1 Arten von Pseudoelementen
Pseudoelemente in CSS ermöglichen es, bestimmte Teile von Elementen zu stylen, wie z.B. den ersten Buchstaben, die erste Zeile oder Inhalte vor oder nach einem Element hinzuzufügen. Sie bieten zusätzliche Styling-Optionen, ohne die HTML-Struktur ändern zu müssen. Pseudoelemente werden mit einem doppelten Doppelpunkt (::) gekennzeichnet.
Hauptpseudoelemente:
::before::after::first-letter::first-line
8.2 Pseudoelement ::before
Das Pseudoelement ::before fügt Inhalte vor dem Inhalt eines Elements hinzu. Es wird oft verwendet, um dekorative Elemente, Icons oder zusätzlichen Text hinzuzufügen.
Syntax:
selektor::before {
content: "" | "Text" | url() | counter | attr();
eigenschaft: wert;
}
Im Feld content wird der HTML-Code angegeben, der hinzugefügt werden soll.
/* Fügt einen Pfeil vor jedem Listenelement hinzu */
li::before {
content: "→ ";
color: red;
}
<ul>
<li>Erstes Listenelement</li>
<li>Zweites Listenelement</li>
<li>Drittes Listenelement</li>
</ul>
8.3 Pseudoelement ::after
Das Pseudoelement ::after fügt Inhalte nach dem Inhalt eines Elements hinzu. Es wird oft verwendet, um dekorative Elemente, Icons oder zusätzlichen Text hinzuzufügen.
Syntax:
selektor::after {
content: "" | "Text" | url() | counter | attr();
eigenschaft: wert;
}
Im Feld content wird der HTML-Code angegeben, der hinzugefügt werden soll.
/* Fügt einen Punkt nach jedem Listenelement hinzu */
li::after {
content: " •";
color: blue;
}
<ul>
<li>Erstes Listenelement</li>
<li>Zweites Listenelement</li>
<li>Drittes Listenelement</li>
</ul>
8.4 Pseudoelement ::first-letter
Das Pseudoelement ::first-letter wird auf den ersten Buchstaben eines Elements angewendet. Es wird oft verwendet, um dekorative Initialen in Absätzen zu erstellen.
Syntax:
selektor::first-letter {
content: "" | "Text" | url() | counter | attr();
eigenschaft: wert;
}
Beispiel:
/* Vergrößert und ändert die Farbe des ersten Buchstabens jedes Absatzes */
p::first-letter {
font-size: 2em;
color: green;
}
<p>Das ist ein Beispieltext in einem Absatz.</p>
<p>Noch ein Beispieltext in einem Absatz.</p>
8.5 Pseudoelement ::first-line
Das Pseudoelement ::first-line wird auf die erste Zeile eines Elements angewendet. Es wird oft verwendet, um die erste Zeile eines Absatzes zu stylen.
Syntax:
selektor::first-line {
content: "" | "Text" | url() | counter | attr();
eigenschaft: wert;
}
Beispiel:
/* Ändert die Farbe und macht die erste Zeile jedes Absatzes fett */
p::first-line {
color: navy;
font-weight: bold;
}
<p>
Dies ist ein Beispieltext in einem Absatz, der genug Text enthält, um in mehrere Zeilen zu zerbrechen, und zeigt, wie das Pseudoelement ::first-line funktioniert. Die erste Zeile jedes Absatzes wird fett und in der Farbe navy hervorgehoben, um die Aufmerksamkeit des Lesers zu erregen. Dieser Effekt wird durch die oben definierte CSS-Regel erreicht.
</p>
<p>
Beachte, dass das Styling nur auf die erste Zeile angewendet wird, unabhängig von ihrer Länge. Der restliche Text im Absatz behält seinen ursprünglichen Stil. Dies kann nützlich sein, um Schlüsselstellen hervorzuheben oder einen visuellen Rhythmus im Text zu erzeugen.
</p>
GO TO FULL VERSION