::after (:after)

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.

/* 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.

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

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

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

• ::before, content