---
title: '::after (:after)'
slug: 'Web/CSS/::after'
tags:
  - CSS
  - CSS Pseudoelement
  - Layout
  - Referenz
  - Web
translation_of: 'Web/CSS/::after'
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Das <code>::after</code> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> matcht ein virtuelles letztes Kindelement des markierten Elements. Es wird typischerweise dazu verwendet, um kosmetischen Inhalt unter Verwendung der {{cssxref("content")}} CSS Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">/* CSS2 Syntax */
element:after  { <em>Stileigenschaften</em> }

/* CSS3 Syntax */
element::after { <em>Stileigenschaften</em> }</pre>

<p>Die <code>::after</code> Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a> und <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelementen</a> einzuführen. Browser unterstützen auch die <code>:after</code> Notation, wie sie in CSS 2 eingeführt wurde.</p>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Einfache_Verwendung">Einfache Verwendung</h3>

<p>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>

<pre class="brush: html">&lt;p class="boring-text"&gt;Hier ist etwas alter, langweiliger Text.&lt;/p&gt;
&lt;p&gt;Hier ist etwas mittelmäßiger Text, weder langweilig noch aufregend.&lt;/p&gt;
&lt;p class="exciting-text"&gt;An MDN mitzuwirken ist einfach und macht Spaß.
Klicke einfach auf den 'BEARBEITEN' Button und füge neue Livebeispiele hinzu oder verbessere bestehende Beispiele.&lt;/p&gt;</pre>

<pre class="brush: css">.exciting-text::after {
  content: "&lt;- *Das* ist interessant!";
  color: green;
}

.boring-text::after {
   content: "&lt;- LANGWEILIG!";
   color: red;
}</pre>

<h4 id="Ausgabe">Ausgabe</h4>

<p>{{EmbedLiveSample('Einfache_Verwendung', 500, 150)}}</p>

<h3 id="Dekoratives_Beispiel">Dekoratives Beispiel</h3>

<p>Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.</p>

<pre class="brush: html">&lt;span class="ribbon"&gt;Beachte, wo die orange Box ist.&lt;/span&gt;</pre>

<pre class="brush: css">.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Sieh dir diese orange Box an.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}</pre>

<h4 id="Ausgabe_2">Ausgabe</h4>

<p>{{EmbedLiveSample('Dekoratives_Beispiel', 450, 20)}}</p>

<h3 id="Tooltips">Tooltips</h3>

<p>Das folgende Beispiel zeigt die Verwendung des <code>::after</code> <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudoelements</a> in Verbindung mit dem <a href="/en-US/docs/Web/CSS/attr"><code>attr()</code></a> CSS Ausdruck und einem <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset">benutzerdefinierten Datenattribut</a> <code>data-descr</code>, um einen rein CSS-basierten, Wörterbuch ähnlichen <em>Tooltip</em> zu erstellen. Sieh dir die Livevorschau unten an oder das <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">Beispiel auf einer separaten Seite</a>.</p>

<pre class="brush: html">&lt;p&gt;Hier ist ein Livebeispiel des oberen Codes.&lt;br /&gt;
  Wir haben ein &lt;span data-descr="Sammlung von Wörtern und Interpunktion"&gt;text&lt;/span&gt; mit ein paar
  &lt;span data-descr="kleine Popups, welche auch wieder verschwinden"&gt;Tooltips&lt;/span&gt;.&lt;br /&gt;
  Sei nicht schüchtern, beweg die Maus darüber, ums dir &lt;span data-descr="nicht wörtlich nehmen"&gt;anzusehen&lt;/span&gt;.
&lt;/p&gt;
</pre>

<pre class="brush: css">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;
}</pre>

<h4 id="Ausgabe_3">Ausgabe</h4>

<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Keine wesentlichen Änderungen zur vorherigen Spezifikation.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "Übergängen bei Pseudoelement Eigenschaften")}}</td>
   <td>{{Spec2("CSS3 Transitions")}}</td>
   <td>Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Animations", "", "Animationen bei Pseudoelement Eigenschaften")}}</td>
   <td>{{Spec2("CSS3 Animations")}}</td>
   <td>Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Führt die Zwei-Doppelpunkte-Syntax ein.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.selectors.after")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li>
</ul>