:before und :after

1 | 9919 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie ":before und :after" mit Ihrem Wissen!

Anzeige Hier werben

:before und :after

Anwendbar auf: alle Elemente
CSS-Level
: CSS2.1, CSS3

Die Selektoren :before und :after stellen Elemente dar, die im Quelltext nicht sichtbar sind. Diese lassen sich, wie andere Elemente formatieren. Die allerdings nur in Verbindung mit der Eigenschaft content funktioniert.

:before und :after sind mit der Version CSS2 dazu gekommen.

In CSS3 Syntax wird ::after und ::before mit 2 : geschrieben, um Pseudoelemente von Pseudoklassen zu unterscheiden. Dies wird allerdings nicht vom Internet Explorer 8 unterstützt.

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
Kompatibilität

Hinweis

Um diese Pseudoelemente stylen zu können muss ein content angegeben werden. Dieses Pseudoelement ist ein Inline-Element und lässt sich mit display: block in ein Block-Element umwandeln. Allerdings nur dann, wenn das Element auf das :before bzw. :after benutzt wird auch ein Block-Element ist.

Beispiel

div element mit angefügten text über css  
HTML
1
2
3
4
5
6
7
8
9
<style type="text/css">
    div:after
    {
        background: #eee;
        border:     1px solid #c00;
        content:    "bar";
    }
</style>
<div>foo</div>

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite ":before und :after" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung ":before und :after" hier bearbeiten.

Mitarbeiter