Ü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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
::afterChrome Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
Firefox Vollständige Unterstützung 1.5
Hinweise
Vollständige Unterstützung 1.5
Hinweise
Hinweise Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none.
Hinweise Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.
Vollständige Unterstützung 1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
IE Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 8
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
Opera Vollständige Unterstützung 7
Vollständige Unterstützung 7
Vollständige Unterstützung 4
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
Safari Vollständige Unterstützung 4
Vollständige Unterstützung 4
Vollständige Unterstützung 4
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
WebView Android Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
Chrome Android Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
Edge Mobile Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
Firefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none.
Hinweise Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.
Vollständige Unterstützung 4
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
Opera Android Vollständige Unterstützung 10.1
Vollständige Unterstützung 10.1
Vollständige Unterstützung 10.1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: :after
Safari iOS ? Samsung Internet Android ?
Animation and transition supportChrome Vollständige Unterstützung 26Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung 26Edge Mobile Vollständige Unterstützung 12Firefox Android Vollständige Unterstützung 4Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, Sebastianz
Zuletzt aktualisiert von: mdnwebdocs-bot,