CSS-Content mit den Pseudoelementen ::before und ::after
Mit den CSS-Pseudoelementen ::before und ::after könnt ihr einem HTML-Element per CSS weitere Inhalte hinzufügen. Die Technik wird für dekorative Zwecke eingesetzt, da die Inhalte nicht Teil des HTML-Codes sind.

Mit Hilfe der CSS-Selektoren ::before
und ::after
habt ihr die Möglichkeit vor- bzw. nach einem HTML-Element ein sog. Pseudoelement zu erzeugen. Das Pseudoelement kann wie ein ganz normales HTML-Element mit CSS gestaltet werden, taucht allerdings im HTML-Markup nicht auf. Aus diesem Grund heißt es auch Pseudoelement.
Damit das Pseudoelement entstehen kann, benötigt es zumindest formal einen Inhalt, der über die CSS-Eigenschaft content
definiert wird. Die Eigenschaft muss vorhanden sein, sie kann jedoch leer bleiben. Das macht u.a. dann Sinn, wenn das Pseudoelement für Zierelemente eingesetzt wird.
Leere Pseudoelemente mit ::before und ::after erzeugen
Das nachfolgende Beispiel zeigt wie zwei leere Pseudoelemente vor- und nach einem <div>
erzeugt werden. Mit ::before
wird der Teasfilmstreifen hergestellt, mit ::after
der Schatten.
HTML-Code
<div></div>
CSS-Code
div {
position: relative;
height: 300px;
width: 400px;
border: 1px solid silver;
margin: 150px auto;
}
/* Tesafilm */
div::before {
content: '';
position: absolute;
width: 200px;
height: 50px;
left: 50%;
top: -25px;
margin-left: -100px;
background: rgb(255,220,65);
}
/* Schatten */
div::after {
content: '';
position: absolute;
width: 390px;
height: 7px;
left: 50%;
bottom: -8px;
margin-left: -195px;
background: #ccc;
}
Textausgabe mit ::before und ::after
Auch die Ausgabe von Text ist mit Hilfe der content
-Eigenschaft möglich. Das nachfolgende Beispiel generiert vor- und nach der Überschrift einzeilige CSS-Inhalte.
HTML-Code
<h1>kulturbanause</h1>
CSS-Code
h1::before {
content: 'Der Blog von ';
color: red;
}
h1::after {
content:' ist super :)';
color: green;
}
Zeilenumbruch in generiertem CSS-Content
Etwas schwieriger wird es, wenn ihr den generierten CSS-Content mit Zeilenumbrüchen auszeichnen möchtet. Der Zeilenumbruch selbst wird innerhalb von content
mit \A
markiert. Zusätzlich benötigt ihr jedoch noch die Eigenschaft white-space:pre
um unerwünschte Umbrüche an falscher Stelle zu vermeiden.
HTML-Code
<div></div>
CSS-Code
div::before {
content: 'So funktioniert der Zeilenumbruch \A in generiertem CSS-Content.';
white-space: pre;
}
Sonderzeichen in generiertem CSS-Content
Sonderzeichen wie beispielweise geschützte Leerzeichen müssen ebenfalls entsprechend codiert werden, damit sie angezeigt werden. Ein
wird so zu \00A0
.
.icon-arrow::after {
content:'\00A0→';
}
Webfont-Icons mit ::before
Sehr häufig wird das ::before
-Pseudoelement eingesetzt um Webfont-Icons einzubinden. Bei einem Webfont-Iconsatz werden die einzelnen Buchstaben einer Schrift als Icon dargestellt.
Das nachfolgende Beispiel zeigt eine Liste mit zwei verschiedenen Icons. Über die globale CSS-Klasse .icon
wird der Webfont-Iconsatz geladen. In den Klassen .icon-checked
und .icon-crossed
wird über ::before
das Zeichen angegeben das für das entsprechende Icon verwendet werden muss.
HTML-Code
<ul>
<li class="icon icon-checked">Bier</li>
<li class="icon icon-crossed">Wasser</li>
<li class="icon icon-checked">Sekt</li>
<li class="icon icon-checked">Schnaps</li>
<li class="icon icon-crossed">Cola</li>
</ul>
CSS-Code
…
.icon::before {
font-family: 'webfont-icon';
margin-right:.5em;
}
.icon-checked::before {
content: "\e600";
color:yellowgreen;
}
.icon-crossed::before {
content: "\e601";
color:tomato;
}
…
Nicht direkt zum Thema, aber mein Vorredner hat mich dazu animiert generell zu Deinem ’superinformativen Blog‘ einen Kommentar zu verfassen.
Als armer Freelancer einer artverwandten Branche, ich produziere Industrie und Imagefilme, kann ich mir das Relaunch meines Internet auftrittes durch eine prof. Agentur leider nicht leisten, obwohl genau dies mich dafür entlasten würde, mich um meine Kernkompetenzen zu kümmern. ;-)
Seit einer Woche bin ich nun am HTML/CSS scripten, teilweise bis in die Morgenstunden.
Ich mache es ‚learning by doing‘ und ganz viel Hilfe aus Euren Blogs.
Ein dickes Dankeschön dafür, ich weiß es wirklich zu schätzen.
Am Anfang jedes ‚googel´ns‘ landet man bei den bekanntesten Seiten, wie SelfHTML und HTML-Seminare. Hier bekommt man ein gutes Grundwissen vermittelt und kann nahezu jeden Begriff schnell selber klären.
Wenn es ums Design und um ganz spezielle Kniffe geht landet man sehr oft bei Insellösungen anderer Mitmenschen, die ihre Codesnippets oft einmalig veröffentlichen, nicht erklären, aber sich sehr oft auf diese tolle Seite beziehen und bei Euch bedanken.
Und das liegt u.a. daran, dass Ihr mit Eurem Wissen nicht hinter dem Berg haltet, Eure mit Sicherheit genause mühsam erarbeiteten Lösungen bereitwillig teilt und dann auch noch in Beispiele ummünzt, die eine breite usabillity versprechen.
Die Krönung für mich ist aber, dass die beschreibenden Text wirklich so verfasst sind, dass man sie als interessierter Laie versteht.
CHAPEAU
Hallo Kalle, vielen Dank – das freut uns sehr und motiviert dazu weiterzumachen ;)
Also irgendwie versteh ich das hier mit „before“ und „after“ nicht. Da fehlt es etwas an Erklärungen. Was z.B. sind „leere“ Pseudoelemente?
Weiterhin würde ich das erste Beispiel mit der Positionierung, die CSS anbietet, erstellen. Wo liegt der Vorteil wenn man das mit „before“ und „after“ macht?
Wann werden :: (zwei Doppelpunkte) und wann : (ein Doppelpunkt) benutzt? Was macht den Unterschied aus? Was bewirkt in dem dritten Beispiel /A und was bewirkt white-space: pre;? Warum werden Web – Fonts mit „before“ eingesetzt und nicht mit einem Link? Fragen über Fragen.
Während der Grundausbildung hatten wir einen Unteroffizier als Gruppenführer, den ich zwar nicht mochte, der aber einmal etwas sagte was mich beeindruckte:
„Leute, ihr seid hier damit ich euch etwas beibringe. Und wenn dann einige von euch anschließend das Ganze nicht verstanden haben stelle ich mir folgende Frage: Was habe ich falsch gemacht, das ich das nicht allen verständlich erklären konnte?“
Schade das nicht die ganze Menschheit diese Einstellung hat.
Hallo Stefan, wir helfen dir gerne die Thematik besser zu verstehen. Schade, dass du voreilig urteilst und uns somit diese Chance nicht gibst. Deine Fragen klären sich auch eigtl. bereits im dem Text (sofern die themenrelevant sind), daher unterstelle ich mal, dass du nicht chronologisch und/oder vollständig gelesen hast.
Dennoch gerne zu deinen im Text nicht beantworteten Fragen:
Was z.B. sind „leere“ Pseudoelemente?
>> ::before und ::after sind jeweils sog. Pseudoelemente, die – wie jedes andere HTML-Element – einen Inhalt besitzen können. Der wichtige Unterschied ist, dass ::before und ::after jedoch NICHT im HTML-Code stehen, sondern im CSS-Code, was in erster Linie für die Semantik der Seite gut ist. Wenn ein Pseudoelement keinen Inhalt zugewiesen bekommt, ist es leer. Das braucht man immer dann, wenn man einen gestalterischen Effekt erzielen möchte, der die Semantik nicht verändern darf. Wie um Beispiel mit Tesafilm und Schatten. Zwei
>> Wann werden :: (zwei Doppelpunkte) und wann : (ein Doppelpunkt) benutzt?
Hier scheinst du Vorwissen mit einzubringen, denn wir schreiben nirgendwo nur einen Doppelpunkt. Pseudoelemente werden mit doppeltem Doppelpunkt geschrieben, Pseudoklassen mit einfachem Doppelpunkt. Da der Internet Explorer seinerzeit einen Bug hatte, gibt es hier eine nicht trennscharfe Kante zwischen den Schreibweisen. Du solltest ::before und ::after heute jedoch unbedingt mit zwei Doppelpunkten schreiben.
>> Warum werden Web – Fonts mit „before“ eingesetzt und nicht mit einem Link?
Es geht hier nicht um das generelle Laden des Webfonts (das würde ggf. mit im geschehen), sondern darum das gewünschte Webfont-Icon darzustellen. Auch hierfür verwendet man häufig ::before, da Pseudoelemente den HTML-Code nicht verändern und somit vor dem Hintergrund der Semantik und der Webstandards oft besser sind.
Seit Tagen bin ich auf der Suche nach einer Lösung. Ich möchte gerne nach einem div einen Text anzeigen lassen. Ich bekomme es einfach nicht hin. Vielleicht habe ich einen Denkfehler? Das ist mein HTML:
und das habe ich im CSS eingegeben:
.td-widget::after {
content: ‚Anzeige‘;
position: relative;
float: right;
border: 1px solid
}
Es wird aber einfach kein Content ausgegeben. Woran könnte das liegen? Der Beitrag um den es geht, ist oben als Webseite verlinkt. Das Widget was ausgegeben wird ist der Slider :)
Liebe Grüße
Nadine
Hallo Nadine,
mit
::after
wird nicht NACH demdiv
der Code eingefügt, sondern vor dem schließendendiv
-Tag. Nach demdiv
ist mit CSS nicht möglich. Dann müsstest du so etwas wie.after()
von jQuery nutzen. Dein Code-Snippet funktioniert nicht, da die Anführungszeichnen beicontent: "";
falsch sind.Hey Jonas,
danke für deine Antwort und den Link. Leider hab ich es noch nicht ganz raus, wo ich nun was einpflegen muss, damit das nun klappt. Kannst du mir sagen, wo ich denn jetzt was einfügen muss? functions.php? Und wäre das denn richtig?
$( „.td-widget“ ).after( „Text“ );
Liebe Grüße
Nadine
Habe diese Liste gefunden, perfekt zum rauskopieren der gewünschten Zeichen:
https://www.jan-pietruska.de/wiki/special-characters-fuer-content-before-after-css/
Sehr hilfreich – vielen Dank
Hi Jonas, Hallo Mitleser,
ich wende diesen Trick gerne an, wie du es in deinem Video gemacht hast (dem Background ein bisschen Struktur geben in „Responsive Webdesign“)
Allerdings habe ich dann immer eine Fehldarstellunng – egal in welchem Browser. Und zwar wird die Grafik nicht über die gesamte Seite gekachelt, sondern nur bis dorthin wo der Browser endet. Soll heißen, wenn ich scrolle, ist ab dem Punkt wo der viewport rein theoretisch zuende ist, nur kein Bild mehr.
Habt ihr einen Workaround oder habe ich etwas vergessen??
Mein CSS sieht so aus:
body {
background:none;
color:#333;
margin: 0;
font-family: ‚Raleway‘, Arial, Helvetica;
font-size: 16px;
line-height: 1.5;
}
body:before {
background: url(„bild.jpg“) repeat scroll left bottom rgba(0, 0, 0, 0);
content: „“;
height: 100%;
position: absolute;
bottom: 0;
opacity: .5;
width: 100%;
z-index:-1; /*damit es unter den anderen Containern liegt und diese nicht überlagert werden*/
}
Bin für alles dankbar ;)
Danke für deine Erklärungen.
:before und :after bieten wirklich viele Möglichkeiten.
Ich würde gerne ein svg-Icon einbinden in meinem Stylesheet.
Das habe ich im Illustrator angefertigt.
So habe ich es, leider ohne Erfolg, versucht.
.mm-list a.mm-subopen:after,
.mm-list a.mm-subclose:before {
content:url („http://meine-domain.ch/medien/logos/Regler.svg“);
width: 3em;
height: 3em;
}
Vielleicht weiss von Euch jemand weiter.
Sollte dieser Fall eintreten, dann bedanke ich wirklich von Herzen
:before und :after war mir als absoluter Anfänger bisher völlig unbekannt, danke für den Artikel!
Unter „Ui Elements“ –> „Buttons“
Das wichtigste Beispiel hast Du vergessen, Buttons mit Text und einem vorgestellten Icon (Fontsymbol)
So wie hier:
http://wrapbootstrap.com/preview/WB0B30DGR
Good point :) Ich habe den Beitrag um ein entsprechendes Beispiel ergänzt. Danke!
„Taucht nicht im Markup auf“
Als ich das erste Mal Kontakt mit diesen Elementen hatte, hab ich mir nen Wolf gesucht wo denn dieser Text „Sie sind hier:“ herkommt :D. Inzwischen weiss ich es und nutze diese Anweisungen eignetlich auch recht gerne. Danke für die Anregung.
vg
Danke!
Besonders interessant fand ich die Info zum Zeilenumbruch. Gibt es noch weitere Sonderzeichen?
Sehr guter Artikel! :before und :after sind wirklich sehr nützlich, wenn es um kleine Specials im Design geht^^
In dem Zusammenhang finde ich auch die „clearfix“-Klasse immer ganz nützlich, also eine CSS-Klasse, die per :after-Pseudoklasse von selbst in ihrem eigenen Inhalt auftretende floats bereinigt:
.clearfix:after {
content: „.“;
display: block;
height: 0;
clear: both;
visibility: hidden;
]
Dazu existiert mittlerweile auf bei uns ein passender Artikel :) Clearfix für gefloatete CSS-Layouts