CSS, HTML und Javascript mit {stil}

CSS ::before / ::after content

Extras mit before und after einfügen

CSS content generiert zusammen mit ::before und ::after einfache Zeichenketten vor oder nach dem Element, setzt Texte und Bilder vor oder nach dem Element ein oder nummeriert verschachtelte geordnete Listen.

Aber Achtung: Der Inhalt, der durch CSS content eingesetzt 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 erzeugen Inhalt, den es im HTML-Markup nicht gibt.

CSS3 setzt bei Pseudo-Elementen anstelle des einfachen Doppelpunkts (wie bei den Pseudo-Klassen :hover und :nth-child) 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.

Pseudo-Klassen hingegen entstehen meist bei Benutzeraktionen und sind durch den einfachen Doppelpunkt gekennzeichnet.

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)

before und after: Vor und nach dem Inhalt einfügen

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 {
   margin-left: 60px; 
}
.cupcake::before { 
   content: url("cupcake.svg"); 
   margin-left: -50px; 
}

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 die URL – der Pfad zum Bild – die Hochkommas.

Ein einfacher Text hingegen sitzt direkt in Hochkommas.

Neben der content-Eigenschaft können weitere Eigenschaften in die Regel wie gewohnt 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 die Darstellung einer Webseite im Druck, wo der Benutzer mit dem reinen Text eines Links nichts anfangen kann.

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

Hier ist ein Link

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

Listen nummerieren

Während HTML uns bereits die Erzeugung der Listenpunkte und die Nummerierung von geordneten Listen abnimmt (mit dem <ul>- und <ol>-Tag), erlaubt CSS die automatische Erzeugung von Zählern in verschachtelten Listen – z.B. für Inhaltsverzeichnisse und die Numerierung von Kapiteln in Dokumentationen.

CSS content

Erblich: Nein

content
wird zusammen mit den Pseudoelementen ::before und ::after benutzt, um Inhalte 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.
{ } before after