::before und ::after sind zwei Pseudoelemente, mit denen sich Inhalt vor oder nach einem Element erzeugen lässt. Gedacht sind sie für Schmuck, nicht für Text.
- ::before und ::after
Pseudoelemente, die als erstes oder letztes Kind eines Elements Inhalt erzeugen.
Beispiel: „::before und ::after brauchen die Eigenschaft content, sonst erscheinen sie nicht.“
Wie sie benutzt werden
.extern::after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
background: url('/icons/extern.svg') no-repeat;
}Der häufigste Einsatz ist Schmuck: Symbole hinter Links, Trennzeichen zwischen Brotkrumen, dekorative Linien. Die Eigenschaft content ist Pflicht, oft mit leerem Wert.
Kein Platz für wichtigen Text
Erzeugter Inhalt steht nicht im Dokument. Screenreader geben ihn uneinheitlich wieder, kopieren lässt er sich nicht, übersetzen auch nicht. Was der Besucher lesen können muss, gehört ins Markup.