::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 erzeugt ::after ein Pseudo-Element, das das letzte Kind des ausgewählten Elements ist. Es wird häufig verwendet, um einem Element mit der content-Eigenschaft kosmetischen Inhalt hinzuzufügen. Standardmäßig ist es in Zeilen eingebunden.

Probieren Sie es aus

Hinweis: Die durch ::before und ::after generierten Pseudo-Elemente sind in Zeilen eingebundene Boxen, die so generiert werden, als wären sie unmittelbare Kinder des Elements, auf das sie angewendet werden, oder des "ursprünglichen Elements". Daher können sie nicht auf ersetzte Elemente angewendet werden, wie z. B. <img>, deren Inhalte ersetzt werden und nicht von den Stilen des aktuellen Dokuments beeinflusst werden.

Syntax

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

Wenn die content-Eigenschaft nicht spezifiziert ist, einen ungültigen Wert hat oder normal oder none als Wert hat, wird das ::after-Pseudo-Element nicht gerendert. Es verhält sich, als ob display: none gesetzt ist.

Hinweis: CSS führte die ::after-Notation (mit zwei Doppelpunkten) ein, um Pseudo-Klassen von Pseudo-Elementen zu unterscheiden. Aus Gründen der Abwärtskompatibilität akzeptieren Browser auch :after, das früher eingeführt wurde.

Barrierefreiheit

Die Verwendung eines ::after-Pseudo-Elements zum Hinzufügen von Inhalten wird nicht empfohlen, da es nicht zuverlässig für Screenreader zugänglich ist.

Beispiele

Einfache Anwendung

Lassen Sie uns zwei Klassen erstellen: eine für langweilige Absätze und eine für aufregende. Wir können diese Klassen verwenden, um Pseudo-Elemente am Ende der Absätze 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 Text oder Bilder in der content-Eigenschaft auf nahezu beliebige Weise 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

Dieses Beispiel verwendet ::after in Verbindung mit dem attr()-CSS-Ausdruck und einem data-descr benutzerdefinierten Datenattribut, um Tooltips zu erstellen. Kein JavaScript erforderlich!

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, wie flexibel ::before und ::after sein können, obwohl für die zugänglichste Erfahrung ein semantisches Offenlegungs-Widget, das auf andere Weise erstellt wird (wie 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

BCD tables only load in the browser

Siehe auch