::after (:after)

Übersicht

Das ::after CSS Pseudoelement entspricht einem virtuellen letzten Kindelement des ausgewählten Elements. Normalerweise wird es verwendet, um kosmetischen Inhalt zu einem Element hinzuzufügen, indem die content CSS Eigenschaft verwendet wird. Dieses Element ist standardmäßig inline.

Syntax

element:after  { Stileigenschaften }  /* CSS2 Syntax */

element::after { Stileigenschaften }  /* CSS3 Syntax */

Die ::after Schreibweise (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Differenzierung zwischen Pseudoklassen und Pseudoelementen zu ermöglichen. Browser akzeptieren auch die :after Schreibweise (mit einfachem Doppelpunkt), die in CSS 2 eingeführt wurde.

Beispiele

Einfache Verwendung

Es werden zwei Klassen erstellt, eine für langweilige Absätze und eine für interessante. Anschließend kann jeder Absatz durch hinzufügen eines Pseudoelements an dessen Ende markiert werden.

<p class="langweiliger-text">Hier steht langweiliger Text.</p>
<p>Hier steht durchschnittlicher Text, der weder langweilig noch interessant ist.</p>
<p class="interessanter-text">An MDN mitzuwirken ist einfach und macht Spaß.
Einfach nur die 'BEARBEITEN' Schaltfläche anklicken, um Onlinebeispiele hinzuzufügen
oder bestehende Beispiele zu verbessern.</p>

.interessanter-text::after {
   content:    "⇐ Dies ist *wirklich* interessant!"; 
   color:      green;
}

.langweiliger-text::after {
   content:    "⇐ LANGWEILIG!";
   color:      red;
}

Ergibt:

Dekoratives Beispiel

Text oder Bilder, die über die content Eigenschaft angegeben werden, können beliebig gestaltet werden.

<span class="ribbon">Beachte wo sich die orange Box befindet.</span>

.ribbon {
   background-color: #5BC8F7;
}

.ribbon::after {
   content:          "Beachte diese orange Box.";
   background-color: #FFBA10;
   border-color:     black;
   border-style:     dotted;
}

Ergibt:

Tooltips

Das folgende Beispiel zeigt die Verwendung des ::after Pseudoelements in Verbindung mit der attr() CSS Funktion und einem data-descr benutzerdefinierten Datenattribut, um einen rein CSS-basierten  to create a pure-CSS, glossarähnlichen Tooltip zu erstellen. Dieses Beispiel wird unten angezeigt, kann aber auch in einer separaten Seite angesehen werden.

<p>Hier ist ein Onlinebeispiel des oberen Codes.<br />
  Hier steht <span data-descr="Sammlung von Wörtern und Punktionation">Text</span> mit ein
  paar <span data-descr="Kleine Popups, welche angezeigt und wieder ausgeblendet werden">Tooltips</span>.<br />
  Mit der Maus über die unterstrichenen Wörter fahren, um Tooltips hierzu anzuzeigen.
</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;
    }

Ergibt:

Spezifikationen

Browser Kompatibilität

[1] Firefox hat vor Version 3.5 nur die CSS 2.0 Variante :after implementiert. Nicht erlaubt waren position, float, list-style-* und einige Anzeigeeigenschaften. Firefox 3.5 hat diese Beschränkungen aufgehoben.

Siehe auch

• ::before, content