::after

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Im CSS erstellt ::after ein Pseudoelement, das das letzte Kind des ausgewählten Elements ist. Es wird häufig verwendet, um ein Element mit der content-Eigenschaft kosmetisch zu ergänzen. Standardmäßig ist es inline.

Probieren Sie es aus

Hinweis: Die durch ::before und ::after erzeugten Pseudoelemente sind Inline-Boxen, die so generiert werden, als wären sie unmittelbare Kinder des Elements, auf das sie angewendet werden, des sogenannten "auslösenden Elements". Daher können sie nicht auf ersetzte Elemente wie <img> angewendet werden, deren Inhalte ersetzt und nicht durch die Stile des aktuellen Dokuments beeinflusst werden.

Syntax

css
::after {
  content: /* value */;
  /* properties */
}

Wenn die content-Eigenschaft nicht angegeben ist, einen ungültigen Wert hat oder normal oder none als Wert enthält, wird das ::after-Pseudoelement nicht gerendert. Es verhält sich so, als wäre display: none gesetzt.

Hinweis: CSS führte die Notation ::after (mit zwei Doppelpunkten) ein, um Pseudoklassen von Pseudoelementen zu unterscheiden. Aus Gründen der Rückwärtskompatibilität akzeptieren Browser auch die ältere Syntax :after.

Barrierefreiheit

Die Verwendung eines ::after-Pseudoelements zur Inhaltsergänzung wird nicht empfohlen, da der Inhalt für Screenreader nicht zuverlässig zugänglich ist.

Beispiele

Grundlegende Nutzung

Lassen Sie uns zwei Klassen erstellen: eine für langweilige Absätze und eine für aufregende. Diese Klassen können verwendet werden, um Pseudoelemente an das Ende von Absätzen hinzuzufügen.

HTML

html
<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

CSS

css
.exciting-text::after {
  content: " <- EXCITING!";
  color: darkgreen;
  font-weight: bolder;
}

.boring-text::after {
  content: " <- BORING";
  color: darkviolet;
  font-weight: bolder;
}

Ergebnis

Dekoratives Beispiel

Wir können Texte oder Bilder in der content-Eigenschaft nahezu beliebig gestalten.

HTML

html
<span class="ribbon">Look at the orange box after this text. </span>

CSS

css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

Ergebnis

Tooltips

In diesem Beispiel wird ::after zusammen mit dem attr()-CSS-Ausdruck und einem data-descr-benutzerdefinierten Datenattribut, zur Erstellung von Tooltips verwendet. Es wird kein JavaScript benötigt!

Wir können auch Tastaturnutzer mit dieser Technik unterstützen, indem wir ein tabindex von 0 hinzufügen, um jedes span per Tastatur fokussierbar zu machen, und einen CSS-:focus-Selektor verwenden. Dies zeigt die Flexibilität von ::before und ::after, obwohl für die zugänglichste Erfahrung ein semantisches Offenlegungs-Widget, das auf eine andere Weise erstellt wurde (z. B. mit details- und summary--Elementen), wahrscheinlich angemessener ist.

HTML

html
<p>
  Here we have some
  <span tabindex="0" data-descr="collection of words and punctuation">
    text
  </span>
  with a few
  <span tabindex="0" data-descr="small popups that appear when hovering">
    tooltips</span
  >.
</p>

CSS

css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::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;
}

Ergebnis

Spezifikationen

Specification
CSS Pseudo-Elements Module Level 4
# generated-content

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::after
Animation and transition support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

Siehe auch