Content – Inhalt – mit CSS erzeugen
::before und ::after sind Pseudo-Elemente. Sie sprechen keine HTML-Elemente an und erzeugen bei der Anzeige der Seite Inhalt, den es im HTML-Markup nicht gibt.
Darum Achtung: Der Inhalt, der durch CSS content erzeugt wird, wird zwar vom Browser gerendert, taucht nicht im Dokument auf und ändert das HTML-Dokument nicht.
Die generelle Syntax für die Pseudo-Elemente before und after für das Einsetzen von Inhalt 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 (z.B. ein Adresse eines Bildes)Einfaches Beispiel
Bambus-Stricknadeln 4 bis 6 nur € 4,95
.offer::before { content: url(needles.svg) "***"; color: var(--accent); font-size:2rem;}<p class="offer">Bambus-Stricknadeln 4 bis 6 nur € 4,95</p>::before und ::after erzeugen Inhalt vor oder nach den Inhalt eines Elements. Auf Elemente ohne Inhalt haben (z.B. <input …>, <img …>, <iframe …>) haben sie keinen Einfluß.
content 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.
.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 Anführungszeichen 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 im src-Attribut – Anführungszeichen. Ein einfacher Text hingegen sitzt direkt in Anführungszeichen.
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.
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.png) " " 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>Hier ist ein Link
Mit dem href-Attribut eines a-Elements funktionieren ::before und ::after prima. Was nicht geht: before / after wirkt nicht bei img-Elementen, denn ein img-Tag hat keinen Inhalt.
Einfacher oder doppelter Doppelpunkt
Pseudo-Klassen wie :hover oder :target entstehen z.B. bei Benutzeraktionen oder durch eine bestimmte Position im HTML wie :first-child oder :last-child. Ihr Kennzeichen ist ein einfacher Doppelpunkt. Pseudo-Elemente sind Elemente, die es so im HTML nicht gibt: ::before, ::after, ::first-letter, ::last-line.
Pseudo-Klassen und Pseudo-Elemente lassen sich miteinander kombinieren, z.B. um einen Link beim Hovern mit der Maus herauszustellen. ┌ Pseudo-Klasse │ ▼ a:hover::before { ▲ │ └── Pseudo-Element………}ul:last-child::after {………}Mit alten Versionen von CSS gab es nur den einfachen Doppelpunkt. Da die modernen Browser den einfachen Doppelpunkt noch unterstützen, gibt es keinen Unterschied zwischen :before und ::before oder :after und ::after.
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; }In den content-String müssen Sonderzeichen entweder direkt oder in hexadezimaler Schreibweise eingegeben werden. Als HTML-Entity-Name oder in der üblichen dezimalen Kodierung würde die Zeichenfolge einfach wörtlich ausgegeben.
.with-hearts::before { content: "&hearts"; color:red; }.with-hex::before { content: "♥"; color:red; }- HTML-Entity-Name ♥
- HTML-Entity in hexadezimaler Schreibweise ♥
HTML-Sonderzeichen – Schreibweisen mit Dezimal-zu-Hex-Rechner.
Nummerieren mit Zählern (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, Anführungszeichen, URLs oder Zählern bestehen.
- Werte
- [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
CSS 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.
