CSS 2.1: Die Pseudoelemente `:before` und `:after`

Allgemeines:

Die Pseudoelemente :before und :after können verwendet werden, um generierte Inhalte vor oder hinter dem Inhalt des aktuellen Elementes einzufügen. Dies geschieht mit Hilfe der Eigenschaft content, deren Wert die Art der eingefügten Inhalte bestimmt. Diese Inhalte sind nicht Teil des HTML- Dokuments, übernehmen aber die vererbbaren Eigenschaften des aktuellen Elementes. Ist dies nicht möglich, nehmen sie ihre Ausgangswerte an.

Die designierten Inhalte werden an jeder Stelle eingefügt, für die sie aufgrund der deklarierten CSS-Regeln in Frage kommen. So gilt beispielsweise die Regel P:before {...} für jeden Absatz.

Generierte Inhalte können weder positioniert noch als Listen oder Tabellen ausgegeben werden. Anwenderprogramme müssen deshalb die Eigenschaften position, float, list-... und Tabelleneigenschaften für generierte Inhalte ignorieren.

Auch die Nutzung der Eigenschaft display ist eingeschränkt:

Wenn der Selektor sich auf ein Block- Level- Element bezieht, sind die Werte none, inline, block und marker erlaubt. Alle anderen Werte werden wie block interpretiert.
Wenn der Selektor sich auf ein Inline- Level- Element bezieht, sind die Werte none und inline erlaubt. Alle anderen Werte werden wie inline interpretiert.

Eine gemeinsame Einschränkung gilt für alle Pseudoelemente: Sie dürfen nur am Ende aller Selektoren notiert werden, sie müssen also als letztes vor der öffnenden geschweiften Klammer stehen.

Code-Beispiel:

UL LI:before { content: url("/graphics/bullet.gif"); } /* erlaubt */

UL:before LI { content: url("/graphics/bullet.gif"); } /* Verboten! */

Browserunterstützung

Die Pseudo-Elemente :before und :after werden von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 5.x, IE/Win 6, IE 7: IE/Win erkennt beide Pseudo-Elemente nicht.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Besonderheiten im Medientyp `handheld`:

Diese Pseudo-Elemente sind nicht Teil des Standards CSS Mobile Profile 1.0. Auch von einer Umsetzung durch einzelne Mobilgeräte ist nichts bekannt.

Wechselwirkungen:

content

Ausblick:

CSS3 wird als auffälligste Neuerung den Doppelcolon vor den Bezeichnungen einführen (::first-line). Dies dient vor allem zur Unterscheidung der Pseudoelemente von den Pseudoklassen.