Das Pseudoelement ::before in CSS wird verwendet, um Inhalte vor einem ausgewählten Element einzufügen. Der Inhalt wird als ein Kind des ausgewählten Elements eingefügt.
Hier ist eine grundlegende Verwendung von ::before:
```css
p::before {
content: “Lesen Sie dies bevor – “;
}
```
In diesem Beispiel wird die Zeichenkette “Lesen Sie dies bevor – “ vor den Inhalt jedes `
` (Absatz) Elements eingefügt.
Ein paar Punkte zu beachten:
- Das content Attribut ist obligatorisch für ::before und ::after Pseudoelemente. Sie werden ohne sie nicht funktionieren.
- Standardmäßig hat das eingefügte Pseudoelement keinen speziellen Stil, es erbt die Stile des Elternelements, aber Sie können es auf jede Weise wie jedes andere Element stilen.
- Sie können nicht nur Text, sondern auch andere Typen von Inhalten wie Bilder, Zähler usw., einfügen.
- Pseudoelemente sind inline von Natur aus.
Also, wenn wir ein schönes Bullet-Symbol vor einer Unordered-Liste hinzufügen wollen, könnten wir so etwas machen:
```css
ul li::before {
content: “• “;
color: blue;
}
```
Jetzt wird jeder Listeneintrag mit einem blauen Bullet-Symbol am Anfang angezeigt.
