- die Online CSS Referenz
Impressum

Inhalte erzeugen

content | counter | counter-increment | counter-reset | quotes

contentzur Übersicht    eins nach unten

content wird in Zusammenhang mit :before und :after verwendet. Seine Werte erlauben Inhalte eines Elementes zu verändern oder Inhalte in ein Element einzufügen.

Werte

[text] | [url] | [counter] | [counters] | attr() | open-quote | close-quote | no-open-quote | no-close-quote | inherit

text fügt den angegebenen Text ein.

url gibt die URL einer Datei an, die einfügt werden soll, bspw. eine Grafik.

counter, counters fügt einen Zähler ein.

attr() fügt das in den Klammern aufgeführte Attribut ein.

open-quote, close-quote fügt ein öffnendes, bzw. schliessendes Anführungszeichen ein.

no-open-quote fügt kein öffnendes Anführungszeichen ein, erhöht aber den Level der Verschachtelung um eins.

no-close-quote fügt kein schliessendes Anführungszeichen ein, veringert jedoch den Level der Verschachtelung um eins.

Standardwert ist nicht gesetzt.

Vererbung

Nein

Beispiel

a[href]:before {content: url(../bilder/extern.gif)" ";}

.waehrung:after {content: ",- Euro"; font-weight: bold;}

content

counterzur Übersichteins nach obeneins nach unten

counter erzeugt einen Zähler oder spricht einen bereits definierten Zähler an. Mit counter können bspw. Kapitel in mehreren Ebenen automatisch durchnummeriert werden. Leider wird die Erstellung von Zählern bisher nur Opera ab Version 7 und Firefox ab Version 1.5 unterstützt.

Werte

Zählername

Standardwert ist keiner gesetzt.

Vererbung

Nein

Beispiel

h1{ font-size: 1.2em; font-weight: bold;}
h2{ font-size: 1.1em; font-weight: normal; margin-left: 12px;}

h1:before{ content: counter(kapitel)". ";}
h2:before{ content: counter(kapitel)"."counter(unterkapitel)". ";}

h1{ counter-increment: kapitel 1; counter-reset: unterkapitel;}
h2{ counter-increment: unterkapitel 1;}

counter

In diesem Beispiel wurde für die Überschrift <h1> der Zähler "kapitel", für <h2> der Zähler "unterkapitel" erzeugt und den Überschriften mittels dem Pseudo-Element :before voran gestellt. Entsprechende Punkte und Leerzeichen trennen die Nummerierung von den Kapiteltexten. Der dritte Block setzt die Zähler bei einem neuen Kapitel hoch und das Unterkapitel wird zurückgesetzt, um sie jeweils wieder bei Eins beginnen zu lassen.

counter-incrementzur Übersichteins nach obeneins nach unten

Die Angabe counter-inkrement legt fest bei welchem Element bei seinem Auftreten der Zählerstand erhöht (inkrementiert) wird. Es werden sowohl positive als auch negative Werte akzeptiert.

Werte

none | [Zählername] [Inkrement] | inherit

Standardwert ist none.

Vererbung

Nein

Beispiel

h1:before{
content: counter(kapitel);
counter-increment: kapitel 1;
}

Der Zähler "kapitel" wird für das Element <h1> definiert und startet mit Eins, da der Startwert bei Null liegt. Bei jedem weiteren Auftreten des Elementes <h1> wird der Zähler um Eins raufgesetzt und vor der Überschrift eingefügt. Mit dem Inkrementwert none wird der Zähler nicht erhöht.

counter-resetzur Übersichteins nach obeneins nach unten

counter-reset dient vor allem zum Zurücksetzen eines definierten Zählers. In der Regel wird der Zähler auf Eins zurückgesetzt, kann aber auch andere Werte annehmen, sowohl eine positive als auch negative Zahl. Eine weitergehende Beschreibungen findet sich unter counter.

Werte

none | [Zählername] [Wert] | inherit

Standardwert ist none.

Vererbung

Nein

Beispiel

h1{ counter-increment: kapitel 1; counter-reset: unterkapitel;}
h2{ counter-increment: unterkapitel 1;}

Sobald das Element <h1> auftritt, wird der Wert für das Element <h2> zurückgesetzt. Beim Auftreten des Elementes <h2> wird der Zähler um Eins heraufgesetzt.

quoteszur Übersichteins nach oben    

quotes legt das Format der Anführungszeichen fest. Mit den Pseudo-Elementen :before und :after in Zusammenhang mit content:open-quote und content:close-quote können die Anführungszeichen auch automatisch eingefügt werden. Für das länderspezifische Setzen von An- und Abführungszeichen kann auch das Pseudo-Element :lang verwendet werden.

Werte

none | [öffnendes/schliessendes Anführungszeichen]

Eine Reihe von Anführungszeichen, wie bspw. das deutsche An- und Abführungszeichen, sind auf einer Tastatur nicht vorhanden. Es bieten sich dafür die Unicode-Bezeichnungen an. Nach ISO 8859 werden die Bezeichnungen in HTML dargestellt, die einfachen Unicode-Bezeichnungen müssen in CSS mit einem Backslash (\) maskiert werden.

Aussehen Beschreibung Unicode
(ISO 8859-1)
Unicode
" Zoll-Zeichen &#34; 0022
« doppeltes franz. Anführungszeichen &#171; 00AB
» doppeltes franz. Abführungszeichen &#187; 00BB
einfaches franz. Anführungszeichen &#8249; 2039
einfaches franz. Abführungszeichen &#8250; 203A
doppeltes deut. Anführungszeichen &#8222; 201E
doppeltes deut. Abführungszeichen &#8220; 201C
doppeltes Anführungszeichen &#8221; 201D
einfaches deut. Anführungszeichen &#8218; 201A
einfaches deut. Abführungszeichen &#8216; 2018
Apostroph &#8217; 2019

Die Anführungszeichen werden jeweils paarweise angegeben, jedes weitere Paar bezieht sich auf die folgende Verschachtelungsebene (z.B. bei Zitaten).

Standardwert ist nicht gesetzt. Er wird durch die länderspezifischen Einstellungen des Browsers vorgegeben.

Vererbung

Ja

Beispiel

q{ quotes:"\00BB" "\00AB" "\203A" "\2039";}

quotes