Beispiel
Legen Sie einen Text vor dem Inhalt jedes <p> Element:
p::before
{
content: "Read this: ";
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die :: vor Selektor fügt etwas vor dem Inhalt jedes ausgewählten element(s) .
Verwenden Sie den Inhalt Eigenschaft , um den Inhalt zu spezifizieren einzufügen.
Verwenden Sie die :: nach Selektor etwas nach dem Inhalt einzufügen.
| Version: | CSS2 |
|---|
Browser-Unterstützung
Die Zahlen in der Tabelle gibt die erste Browser-Version, die die Wähler voll unterstützt.
| Wähler | |||||
|---|---|---|---|---|---|
| ::before | 4.0 | 9.0 Teil von 8,0 | 3.5 | 3.1 | 7.0 Teil von 4,0 |
Hinweis: IE8 und Opera 6.4 unterstützen nur die alten, single-Kolon CSS2 - Syntax (:before) . Neuere Versionen unterstützen den Standard, Doppel Kolon CSS3 Syntax (::before) .
Hinweis: Für: vor in IE8 zu arbeiten, ein <! DOCTYPE> muss deklariert werden.
CSS-Syntax
::before {
css declarations ;
}
Mehr Beispiele
Beispiel
Inhalt einfügen vor jedem <p> Element Inhalt und Stil den eingefügten Inhalt:
p::before
{
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS Pseudo-Elemente
CSS - Selektor - Referenz: CSS :: nach Selektor