CSS ::before / ::after content

CSS before und after: Inhalt per CSS einfügen

Die CSS-Eigenschaft content erzeugt zusammen mit ::before und ::after einfache Zeichenketten vor oder nach dem Element, setzt Text vor oder nach dem Element ein oder nummeriert verschachtelte geordnete Listen.

Aber Achtung: Der Inhalt, der durch CSS content erzeugt wird, wird zwar vom Browser gerendert, taucht aber nicht im DOM auf und ändert das HTML-Dokument nicht.

::before und ::after sind Pseudo-Elemente. Sie sprechen keine HTML-Elemente des DOM an und erzeugen Inhalt, den es im HTML-Markup nicht gibt.

CSS3 setzt bei Pseudo-Elementen einen doppelten Doppelpunkt. Da die modernen Browser den einfachen Doppelpunkt noch unterstützen, gibt es keinen Unterschied zwischen :before und ::before oder :after und ::after.

Die generelle Syntax für die Pseudo-Elemente before und after ist

                              +--- Zeichenkette 
                              |
                              |
                              |       +--- ein Attribut des Selektors      
                              |       |
                              |       |
selector::before { content: "string" attr(x) attr(y) "string"; }

selector::after  { content: url(…) attr(x) attr(y) "string"; }
                              |
                              |
                              +--- url (u.B. ein Adresse eines Bildes)

Einfaches Beispiel

Bambus-Stricknadeln 4 bis 6 nur € 4,95

.offer::before {
    content: "Nur heute ";
    font-size: larger; 
    color: red; 
}

<p class="offer">Bambus-Stricknadeln 4 bis 6 nur € 4,95</p>

Pseudo-Klassen wie :hover oder :target hingegen entstehen z.B. bei Benutzeraktionen oder durch eine bestimmte Position im HTML wie :first-child oder :last-child und sind durch den einfachen Doppelpunkt gekennzeichnet.

before und after mit attr

Neben dem einfachen Einfügen eines Textes durch content: "string" kann die content-Eigenschaft durch Attribute erweitert werden. Ein Attribut ist z.B. die URL eines Bildes.

Caramels muffin topping.
Bear claw marshmallow chocolate bar pudding muffin jelly beans pie. Cookie croissant pastry chocolate cake tootsie roll.

Blindtext von Cupcake Ipsum

.cupcake::before {
             string           attr         string
                |              |             |
    content: "Rezept " url("cupcake.svg") " neu! "; 
    line-height: 1em; 
    color: firebrick; 
    margin-right: 1em;
}

<a href="rezept.html" class="cupcake">Caramels muffin topping</a>

Wenn ein Bild mit ::before vor dem Text bzw. ::after nach dem Text eingesetzt wird, benutzt die content-Eigenschaft die URL des Bildes. Keine Hochkommas rund um url(), denn so würde url() als Text und nicht als Source-URL des Bildes dargestellt. Bei einem Bild braucht der URL-String – der Pfad zum Bild – die Hochkommas. Ein einfacher Text hingegen sitzt direkt in Hochkommas.

Und noch ein Beispiel: title-Attribut eines abbr-Tags im Druck und auf Touchscreens anzeigen:

Radar

abbr[title]:after {content: " (" attr(title) ") "}

/* Auf Notebook und Desktop-Monitoren nur kennzeichnen */
@media (min-width:1160px) {
   abbr[title] {border-bottom: 1px dotted gray}
   abbr[title]:after {content: "" }
}

Neben der content-Eigenschaft können weitere Eigenschaften (z.B. color, font-size, …) wie gewohnt in die Regel eingefügt werden.

Doppelter Doppelpunkt

Hintergrund der neuen Schreibweise ist, dass der einfache Doppelpunkt vor CSS3 sowohl für Pseudoklassen als auch für Pseudoelemente im Umlauf war. CSS3 will durch den doppelten Doppelpunkt den Unterschied zwischen Pseudo-Klasse und Pseudo-Element hervorheben: Pseudo-Elemente bekommen einen doppelten Doppelpunkt, Pseudo-Klassen behalten den einfachen Doppelpunkt.

Das klingt jetzt komplizierter als es ist, denn die modernen Browser sind dazu angehalten – wenn nicht sogar verdammt – den einfachen Doppelpunkt bis in alle Ewigkeit zu unterstützen.

Internet Explorer unterstützt CSS content ab Version 8, aber versteht before und after nur mit der alten CSS2-Syntax mit dem einfachen Doppelpunkt. Die neue Syntax in CSS3 gibt dem before und after einen doppelten Doppelpunkt ::before und ::after und wird von allen modernen Browser inkl. IE9 erkannt.

::after
bestimmt, dass Inhalte nach dem Element eingefügt werden, das durch den Selektor angegeben ist. Der Doppelpunkt ist erforderlich.
Syntax: selector::after { ... }.
::before
legt fest, dass Inhalte vor dem Element eingefügt werden, das durch den Selektor angegeben ist. Der Doppelpunkt ist erforderlich.
Syntax: selector::before { ... }.

URL eines Links beim Druck ausgeben

Die CSS-Eigenschaft content setzt im folgenden Beispiel ein Bild vor einen Link und hinter den Link die ausgeschriebene Adresse in runde Klammern. Interessant ist eine derartige Eigenschaft z.B. für das Print-Stylesheet einer Webseite, wobei der Benutzer mit dem Text innerhalb des a-Tags nichts anfangen kann.

Als Attribut kann dann das href-Attribut des a-Tags eingesetzt werden.

a.show:before { 
   content: url(bild.gif) " " attr(href) " ";
}
a.show::after { 
   content: " (https://www.mediaevent.de" attr(href) ") ";
}
…
<p><a class="show" href="/css/generated.html">Hier ist ein Link</a></p>

Listenkugeln mit CSS::before und content: ersetzen

  • HTML
  • Javascript

Was durch die Eigenschaft content: vor oder nach einem Selektor gesetzt wird, kann durch weitere CSS-Eigenschaften gestylt werden.

.listbef li::before { content: " ♥ "; color: firebrick; font-size: 2em; }

Nummerieren mit content counter

Während HTML uns bereits die Erzeugung der Listenpunkte und die Nummerierung von Aufzählungen abnimmt (mit dem <ul>- und <ol>-Tag), ermöglichen before und after auch die automatische Erzeugung von Zählern (CSS Counter) in verschachtelten Listen und von Tabellenzeilen.

Anders als ungeordnete Listen mit HTML ol können CSS counter Elemente zählen und nummerieren, die Markup nicht direkt aufeinander folgen.

CSS content

Erblich: Nein

content
wird zusammen mit den Pseudoelementen ::before und ::after benutzt, um Inhalt entweder vor oder hinter dem gebenen CSS-Selektor einzufügen. Der eingefügte Inhalt kann aus Zeichenketten, Hochkommas, URLs oder Zählern bestehen.
Werte
[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

Die CSS-Eigenschaft content wird nicht vererbt. Da aber ::before und ::after ihre Eigenschaften vererben, können verschiedene CSS-Eigenschaften auf den Inhalt angewendet werden.

none
verhindert die Generierung des Pseudoelements
normal
wirkt wie none
<counter>
(name, string, list-style-type) fügt alle Zähler mit Namen als Inhalt ein und stellt sie in dem angegebenen Listenstil dar (z.B. decimal 1,2,3 ..., upper-latin I, II, III …).
close-quote
close-quote fügt ein schließendes Hochkomma ein, wie es in der CSS-Eigenschaft für verschachtelte Hochkommas definiert ist.
no-close-quote
fügt kein schließendes Hochkomma ein, sondern zählt die CSS-Eigenschaft quotes herunter.
no-open-quote
fügt kein öffnendes Hochkomma ein, sondern zählt die CSS-Eigenschaft quotes hoch.
open-quote
fügt ein öffnendes Hochkomma ein, wie es in der CSS-Eigenschaft für verschachtelte Hochkommas definiert ist.
string
fügt eine Zeichenkette oder einen Text in Hochkommas ein.
<uri>
ist eine externe Resource – z.B. die Adresse eines Bildes.