::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
::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
<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
.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
<span class="ribbon">Look at the orange box after this text. </span>
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
<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
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