Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

::after (:after)

Übersicht

Das ::after CSS Pseudoelement matcht ein virtuelles letztes Kindelement des markierten Elements. Es wird typischerweise dazu verwendet, um kosmetischen Inhalt unter Verwendung der content CSS Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.

Syntax

/* CSS2 Syntax */
element:after  { Stileigenschaften }

/* CSS3 Syntax */
element::after { Stileigenschaften }

Die ::after Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen Pseudoklassen und Pseudoelementen einzuführen. Browser unterstützen auch die :after Notation, wie sie in CSS 2 eingeführt wurde.

Beispiele

Einfache Verwendung

Lass uns zwei Klassen erstellen: eine für langweilige Absätze und eine für aufregende. Wir können anschließend jeden Absatz markieren, indem wir ein Pseudoelement an dessen Ende setzen.

<p class="boring-text">Hier ist etwas alter, langweiliger Text.</p>
<p>Hier ist etwas mittelmäßiger Text, weder langweilig noch aufregend.</p>
<p class="exciting-text">An MDN mitzuwirken ist einfach und macht Spaß.
Klicke einfach auf den 'BEARBEITEN' Button und füge neue Livebeispiele hinzu oder verbessere bestehende Beispiele.</p>
.exciting-text::after {
  content: "<- *Das* ist interessant!"; 
  color: green;
}

.boring-text::after {
   content: "<- LANGWEILIG!";
   color: red;
}

Ausgabe

Dekoratives Beispiel

Wir können Text oder Bilder innerhalb der content Eigenschaft fast beliebig stylen.

<span class="ribbon">Beachte, wo die orange Box ist.</span>
.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Sieh dir diese orange Box an.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Ausgabe

Tooltips

Das folgende Beispiel zeigt die Verwendung des ::after Pseudoelements in Verbindung mit dem attr() CSS Ausdruck und einem benutzerdefinierten Datenattribut data-descr, um einen rein CSS-basierten, Wörterbuch ähnlichen Tooltip zu erstellen. Sieh dir die Livevorschau unten an oder das Beispiel auf einer separaten Seite.

<p>Hier ist ein Livebeispiel des oberen Codes.<br />
  Wir haben ein <span data-descr="Sammlung von Wörtern und Interpunktion">text</span> mit ein paar
  <span data-descr="kleine Popups, welche auch wieder verschwinden">Tooltips</span>.<br />
  Sei nicht schüchtern, beweg die Maus darüber, ums dir <span data-descr="nicht wörtlich nehmen">anzusehen</span>.
</p>
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

Ausgabe

Spezifikationen

Spezifikation Status Kommentar
CSS Pseudo-Elements Level 4
Die Definition von '::after' in dieser Spezifikation.
Arbeitsentwurf Keine wesentlichen Änderungen zur vorherigen Spezifikation.
CSS Transitions
Die Definition von 'Übergängen bei Pseudoelement Eigenschaften' in dieser Spezifikation.
Arbeitsentwurf Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.
CSS Animations
Die Definition von 'Animationen bei Pseudoelement Eigenschaften' in dieser Spezifikation.
Arbeitsentwurf Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.
Selectors Level 3
Die Definition von '::after' in dieser Spezifikation.
Empfehlung Führt die Zwei-Doppelpunkte-Syntax ein.
CSS Level 2 (Revision 1)
Die Definition von '::after' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:after Unterstützung (Ja) 1.0 (1.7 oder früher)[1] 8.0 4 4.0
::after Unterstützung (Ja) 1.5 (1.8)[1] 9.0 7 4.0
Unterstützung von Animationen und Übergängen 26 4.0 (2.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:after Unterstützung (Ja) ? ? ? ?
::after Unterstützung (Ja) ? ? ? ?
Unterstützung von Animationen und Übergängen (Ja) 4.0 (4.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt

[1] Firefox hat vor Version 3.5 nur die CSS 2.0 Version von :after unterstützt. Nicht erlaubt waren position, float, list-style-* und einige andere Anzeigeeigenschaften. Firefox 3.5 hat diese Beschränkungen aufgehoben.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz
 Zuletzt aktualisiert von: Sebastianz,