Beispiel
Legen Sie einen Text nach dem Inhalt jedes <p> Element:
p::after
{
content: " - Remember this";
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die :: nach Selektor fügt etwas nach dem Inhalt des ausgewählten element(s) .
Verwenden Sie den Inhalt Eigenschaft , um den Inhalt zu spezifizieren einzufügen.
Verwenden Sie die :: vor Selektor etwas vor 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 | |||||
---|---|---|---|---|---|
::after | 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 (:after) . Neuere Versionen unterstützen den Standard, Doppel Kolon CSS3 Syntax (::after) .
Hinweis: Für: nach in IE8 zu arbeiten, ein <! DOCTYPE> muss deklariert werden.
CSS-Syntax
::after {
css declarations ;
}
Mehr Beispiele
Beispiel
Inhalt einfügen nach jedem <p> Element und Stil den eingefügten Inhalt:
p::after
{
content: " - Remember this";
background-color: yellow;
color: red;
font-weight: bold;
}
Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS Pseudo-Elemente
CSS - Selektor - Referenz: CSS :: vor Selektor