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

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:

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:

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