kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

CSS-Content mit :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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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.

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

…

Für die Arbeit mit Webfont-Icons stehen diverse Online-Tools und Download-Quellen zur Verfügung. Um den Icon-Schriftsatz für dieses Beispiel herzustellen habe ich den Dienst Icomoon verwendet. Webfont-Icon-Tools anzeigen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

11 Kommentare

  1. Florian

    Verfasst am 21. Dezember 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;
    ]

  2. Nico

    Verfasst am 22. Dezember 2013 um 14:56 Uhr.

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

  3. Johannes

    Verfasst am 23. Dezember 2013 um 19:54 Uhr.

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

  4. Frank

    Verfasst am 27. Dezember 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

  5. sight011

    Verfasst am 27. Dezember 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

    • Jonas Hellwig

      Verfasst am 27. Dezember 2013 um 17:05 Uhr.

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

  6. sight011

    Verfasst am 27. Dezember 2013 um 11:46 Uhr.

    Unter „Ui Elements“ –> „Buttons“

  7. Uta

    Verfasst am 27. Dezember 2013 um 13:14 Uhr.

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

  8. Marisa

    Verfasst am 18. März 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

  9. Katharina Tan

    Verfasst am 24. April 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 ;)

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.