Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe