::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.

In CSS, ::after erstellt ein Pseudo-Element, das das letzte Kind des ausgewählten Elements ist. Es wird häufig verwendet, um kosmetischen Inhalt zu einem Element mit der content-Eigenschaft hinzuzufügen. Es ist standardmäßig inline.

Probieren Sie es aus

Hinweis: Die durch ::before und ::after erzeugten Pseudo-Elemente sind Inline-Boxen, die so generiert werden, als wären sie unmittelbare Kinder des Elements, auf das sie angewendet werden, oder des "ursprünglichen Elements", und können daher nicht auf Ersetzte Elemente angewendet werden, wie zum Beispiel <img>, deren Inhalte ersetzt werden 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 als Wert normal oder none hat, wird das ::after-Pseudo-Element nicht gerendert. Es verhält sich, als wäre display: none gesetzt.

Hinweis: CSS hat die ::after-Schreibweise (mit zwei Doppelpunkten) eingeführt, 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 zur Inhaltsergänzung wird nicht empfohlen, da es für Screenreader nicht zuverlässig zugänglich ist.

Beispiele

Grundlegende Verwendung

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 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 Text oder Bilder in der content-Eigenschaft fast 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

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 mit der Tastatur fokussierbar zu machen, und einen CSS-:focus-Selektor verwenden. Dies zeigt, wie flexibel ::before und ::after sein können, obwohl für die am meisten zugängliche Erfahrung ein semantisches Offenlegungs-Widget, das auf andere Weise erzeugt wurde (wie mit details und summary Elementen), wahrscheinlich geeigneter 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