::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 mithilfe der content-Eigenschaft kosmetischen Inhalt zu einem Element hinzuzufügen. Standardmäßig ist es inline.

Probieren Sie es aus

a::after {
  content: " (" attr(href) ")";
}

.dead-link {
  text-decoration: line-through;
}

.dead-link::after {
  content: url("/shared-assets/images/examples/warning.svg");
  display: inline-block;
  width: 12px;
  height: 12px;
}

<p>
  The sailfish is named for its sail-like dorsal fin and is widely considered
  the fastest fish in the ocean.
  <a href="https://en.wikipedia.org/wiki/Sailfish"
    >You can read more about it here</a
  >.
</p>

<p>
  The red lionfish is a predatory scorpionfish that lives on coral reefs of the
  Indo-Pacific Ocean and more recently in the western Atlantic.
  <a href="" class="dead-link">You can read more about it here</a>.
</p>

Hinweis: Die durch ::before und ::after generierten Pseudo-Elemente sind inline Boxen, die erstellt werden, als ob sie unmittelbare Kinder des Elements wären, auf das sie angewendet werden, oder des "ursprünglichen Elements", und 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 betroffen sind.

Syntax

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

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

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, um Inhalt hinzuzufügen, 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 spannende. Diese Klassen können verwendet werden, 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 zusammen mit dem attr()-CSS-Ausdruck und einem data-descr benutzerdefinierten Datensattribut, um Tooltips zu erstellen. Kein JavaScript erforderlich!

Wir können auch Tastaturnutzern mit dieser Technik helfen, indem wir einen tabindex von 0 hinzufügen, um jedes span tastaturfokussierbar zu machen, und einen CSS :focus-Selektor verwenden. Dies zeigt, wie flexibel ::before und ::after sein können, jedoch ist für die barrierefreiste Erfahrung ein semantisches Offenlegungs-Widget, das auf andere Weise erstellt wurde (z.B. mit details und summary-Elementen) wahrscheinlich besser geeignet.

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