Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

CSS-Anweisung content:

Die CSS-Anweisung content: funktioniert nur in Zusammenspiel mit ::before bzw. ::after. Diese beiden haben wir im vorherigen Kapitel kennen gelernt.

Attribute von content:

In dem grundlegenden Aufbau haben wir gesehen, dass man mehrere Attribute nach content: angeben kann.

Selektor::before { content: "Inhalt" Attribut1 Attribut2 "Inhalt"; }

Hier haben wir verschiedene Vorgaben wie beispielsweise „open-quote“.

Bisher haben wir für die Brotkrumennavigation folgenden HTML-Code:

<div id="breadcrumb"><a href="index.htm">Startseite</a></div>

Ergänzen wir damit unser bisheriges Beispiel:

#breadcrumb::before {
	content:"Sie befinden sich: " open-quote; 
	background-color: orange;
}

Es wird zusätzlich zum Text ein öffnendes doppeltes Anführungszeichen ausgegeben.

Folgende Werte können für content: genutzt werden

Wert Funktion
string Ein Text-Inhalt, der dann im Browser ausgegeben wird
none / normal Das Pseudoelement wird nicht generiert bzw. ein generiertes ausgeblendet!
<uri> Bilder einfügen
counter Nutzen einer Zählvariablen (siehe Beispiel mit 1.1, 1.2, 1.3)
open-quote Anführungszeichen
close-quote Abführungszeichen (am Ende eines Zitates oder einer direkten Rede)
no-open-quote Zeigt zwar keine Anführungszeichen an, zählt aber trotzdem hoch
no-close-quote Zeigt zwar keine Anführungszeichen an, zählt aber trotzdem hoch

Nutzung von string

Wir können einen beliebigen String-Inhalt (sprich Text) ausgeben lassen. Allerdings werden in diesem String zusätzlich eingegebene HTML-Befehle direkt auf dem Bildschirm ausgegeben!

Für ein weiterführendes Design sind also weitere CSS-Anweisungen notwendig.

Bisher hatten wir dies in den vorherigen Beispielen bereits verwendet:

#breadcrumb::before {
	content:"Sie befinden sich: "; 
}

Es erfolgt als Ergebnis:

Sie befinden sich: Startseite

Das folgende Beispiel hat HTML-Befehl <i> im content eingebaut – die HTML-Befehle werden also nicht interpretiert sondern auf dem Bildschirm in den typischen spitzen Klammern ausgegeben.

#breadcrumb::before {
	content:"Sie <i>befinden</i> sich: "; 
}

Hier kommt dann als Ausgabe auf dem Bildschirm:

Sie <i>befinden</i> sich: Startseite

Nutzung von „none“ bzw. „normal“

Ein erzeugter Inhalt kann zum Beispiel auch wieder ausgeblendet werden. Für unser obiges Beispiel für die Breadcrumbs wird bei Mausberührung der Bereich wieder ausgeblendet über „none“.

#breadcrumb:hover::before {
    content: none;
}

Bilder einfügen über ::before / ::after

Ein Attribut wäre z.B. eine URL und somit können wir neben Texte auch Bilder einfügen

.schlemmergericht::after {
    content: url("lecker.png") " und kalorienarm "; 
}

Wir man sieht, sind wir nicht auf das Bild beschränkt. Wir können nach dem Bild genauso Text mitgeben, wie auch vor dem Bild, wie man im folgenden Beispiel sieht:

.schlemmergericht::after {
    content: " LECKER " url("lecker.png") " und kalorienarm "; 
}

Hier ist auch eine typische Anwendung, dass man Aufzählungslisten anstelle von Spiegelstrichen mit kleinen Grafiken versieht.

Nutzung von counter

Über „counter“ kann eine Zahl ausgegeben werden, die über CSS hochgezählt wird.

Das ausführliche Beispiel für den Einsatz von „counter“ gibt es im Kapitel „ Zähler/Variablen in CSS verwenden“.

Nutzung von „open-quote“ bzw. „close-quote“

Für die unterschiedlichen typografisch korrekten Anführungszeichen muss man CSS mitteilen, was da verwendet werden soll, da es nationale Unterschiede gibt.

Für Deutschland wäre dann folgende Angabe korrekt – das Anführungszeichen ist ein unten platziertes Zeichen ähnlich zweiter Neuner „99“ und das Abführungszeichen ein oben platziertes „66“ (ähnlich zweier Sechser).

#breadcrumb { quotes: "„" "“" "‚" "‘" }

Wird nun über „content“ entweder „open-quote“ oder „close-quote“ verwendet, werden die korrekten Anführungszeichen ausgegeben:

#breadcrumb { quotes: "„" "“" "‚" "‘" }
#breadcrumb::before {
	content:"Sie befinden sich: " open-quote; 
}
#breadcrumb::after {
	content: close-quote " (NEU)";
}
weitere eigene Projekte: