CSS Pseudoelement: :before und :after

stylesheet.css · Die Pseudoelemente :before und :after

p::before {
  outline: 2px solid #7A2FB0;
}

Überschrift

Erster Absatz direkt nach der Überschrift, mit einem Link und einem Zitat.

Zweiter Absatz, Klasse extra.

Erster Listenpunkt
Zweiter Listenpunkt mit Link
Dritter Listenpunkt

Dritter Absatz, ohne Klasse.

Selektorp::before

Treffer–

Spezifität–

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.

Warum es Pseudoelemente heißt

Der erzeugte Inhalt steht nicht im Dokument. Er taucht im Dokumentbaum nicht auf, lässt sich von einem Skript nicht als Element ansprechen und existiert nur in der Darstellung. Was von ihm bleibt, wenn das Stylesheet fehlt, ist nichts.

Trotzdem verhält er sich wie ein Element, soweit es die Formatierung betrifft. Die Seite nennt den entscheidenden Punkt: er übernimmt die vererbbaren Eigenschaften des Elements, an dem er hängt, und fällt für alles Übrige auf die Ausgangswerte zurück. Er erbt also Schrift und Farbe, nicht aber Abstände oder Rahmen.

Daraus folgt eine Faustregel für den Inhalt, der dort hineingehört: Zeichen, die der Gestaltung dienen, gehören ins Stylesheet, Text, der gelesen werden muss, gehört ins Dokument. Ein Anführungszeichen oder ein trennender Strich ist an dieser Stelle richtig, ein Satz nicht.

Ohne content kein Kasten

Das Pseudoelement entsteht erst durch die Eigenschaft, die seinen Inhalt festlegt. Fehlt sie, wird keine Box erzeugt, und alle anderen Deklarationen der Regel bleiben wirkungslos. Das ist der übliche Grund dafür, dass eine solche Regel scheinbar nichts tut.

Weil oft gar kein Text gewünscht ist, sondern nur eine Fläche, steht dort meist eine leere Zeichenkette. Damit ist die Bedingung erfüllt, und die Box lässt sich über ihre Maße und ihren Hintergrund gestalten. Voraussetzung ist allerdings ein Anzeigetyp, der Maße überhaupt annimmt, denn erzeugter Inhalt ist zunächst eine Inline-Box.

Die zweite gängige Konstruktion ist die absolute Positionierung des Pseudoelements innerhalb seines Elements. Sie setzt voraus, dass dieses Element selbst positioniert ist, sonst bezieht sich die Angabe auf einen weiter außen liegenden Rahmen.

Ein Doppelpunkt oder zwei

Diese Referenz schreibt die Pseudoelemente mit einem Doppelpunkt, wie CSS 2.1 es vorsieht. Dort sehen Pseudoklassen und Pseudoelemente gleich aus, obwohl sie Verschiedenes tun: die einen schränken eine Menge von Elementen ein, die anderen erzeugen etwas, das kein Element ist.

Eine spätere Fassung der Selektoren hat diese Unterscheidung sichtbar gemacht und für Pseudoelemente zwei Doppelpunkte eingeführt. Für die vier Pseudoelemente aus CSS 2 gilt beides gleichermaßen, damit ältere Stylesheets weiter wirken; für alle später hinzugekommenen sind zwei Doppelpunkte zwingend.

Praktisch heißt das: eine Schreibweise mit einem Doppelpunkt ist an dieser Stelle kein Fehler, sondern ein Hinweis auf das Alter des Stylesheets. Neue Regeln schreibt man mit zweien.

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.

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

Pseudoelement Die Pseudoelemente :before und :after