Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

CSS-Content mit den Pseudoelementen ::before und ::after

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.

Beispiel anzeigen

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.

Beispiel anzeigen

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.

Beispiel anzeigen

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 &nbsp; 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.

Beispiel anzeigen

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;
}

…

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 20 Kommentare

  1. KallePeng
    schrieb am 18.04.2019 um 10:07 Uhr:

    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

    Antworten
    • Jonas Hellwig
      schrieb am 24.04.2019 um 22:15 Uhr:

      Hallo Kalle, vielen Dank – das freut uns sehr und motiviert dazu weiterzumachen ;)

      Antworten
  2. Stefan
    schrieb am 15.09.2018 um 22:43 Uhr:

    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.

    Antworten
    • Jonas Hellwig
      schrieb am 17.09.2018 um 10:44 Uhr:

      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

      wären hier schlechter.

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

      Antworten
  3. Nadine
    schrieb am 06.05.2018 um 22:50 Uhr:

    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

    Antworten
    • Jonas Hellwig
      schrieb am 07.05.2018 um 08:31 Uhr:

      Hallo Nadine,
      mit ::after wird nicht NACH dem div der Code eingefügt, sondern vor dem schließenden div-Tag. Nach dem div 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 bei content: ""; falsch sind.

      Antworten
      • Nadine
        schrieb am 07.05.2018 um 10:36 Uhr:

        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

  4. Nikolai Kraneis
    schrieb am 06.03.2018 um 13:14 Uhr:

    Habe diese Liste gefunden, perfekt zum rauskopieren der gewünschten Zeichen:
    https://www.jan-pietruska.de/wiki/special-characters-fuer-content-before-after-css/

    Antworten
    • Jonas Hellwig
      schrieb am 06.03.2018 um 22:38 Uhr:

      Sehr hilfreich – vielen Dank

      Antworten
  5. Katharina Tan
    schrieb am 24.04.2014 um 15:59 Uhr:

    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 ;)

    Antworten
  6. Marisa
    schrieb am 18.03.2014 um 16:22 Uhr:

    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

    Antworten
  7. Uta
    schrieb am 27.12.2013 um 13:14 Uhr:

    :before und :after war mir als absoluter Anfänger bisher völlig unbekannt, danke für den Artikel!

    Antworten
  8. sight011
    schrieb am 27.12.2013 um 11:46 Uhr:

    Unter „Ui Elements“ –> „Buttons“

    Antworten
  9. sight011
    schrieb am 27.12.2013 um 11:45 Uhr:

    Das wichtigste Beispiel hast Du vergessen, Buttons mit Text und einem vorgestellten Icon (Fontsymbol)

    So wie hier:
    http://wrapbootstrap.com/preview/WB0B30DGR

    Antworten
    • Jonas Hellwig
      schrieb am 27.12.2013 um 17:05 Uhr:

      Good point :) Ich habe den Beitrag um ein entsprechendes Beispiel ergänzt. Danke!

      Antworten
  10. Frank
    schrieb am 27.12.2013 um 11:39 Uhr:

    „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

    Antworten
  11. Johannes
    schrieb am 23.12.2013 um 19:54 Uhr:

    Danke!
    Besonders interessant fand ich die Info zum Zeilenumbruch. Gibt es noch weitere Sonderzeichen?

    Antworten
  12. Nico
    schrieb am 22.12.2013 um 14:56 Uhr:

    Sehr guter Artikel! :before und :after sind wirklich sehr nützlich, wenn es um kleine Specials im Design geht^^

    Antworten
  13. Florian
    schrieb am 21.12.2013 um 13:54 Uhr:

    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;
    ]

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →