content

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

In manchen Konstellationen ist es vorteilhaft, vor und hinter einem HTML-Element speziellen Inhalt einzublenden. Dieser wird auch als »generierter Inhalt« bezeichnet und ist als Designelement nicht Teil des HTML-Dokuments, sondern wird aus den Angaben in einem Stylesheet generiert. Mit der Eigenschaft content werden generierte Inhalte definiert. Eingesetzt wird sie ausschließlich mit den Pseudo-Elementen :before oder :after.

Vererbt: nein

Siehe auch: counter-increment, counter-reset, quotes

Werte

Die CSS2-Spezifikation erlaubt für generierte Inhalte eine ganze Reihe unterschiedlicher Formate, mehrere davon werden jedoch nicht von den aktuellen Browsern unterstützt (siehe Abschnitt »Kompatibilität« unten). Gültig ist eine beliebige Kombination der folgenden Formate. Die Wertangaben werden in einer Deklaration mit einem Leerzeichen voneinander getrennt.

• "arbitrary string": Dieses Format erzeugt einen beliebigen Text vor oder hinter dem eigentlichen Inhalt des betreffenden Elements. Der Text in dem Ausdruck selbst kann nicht mit HTML-Tags formatiert werden – der Browser würde die Tags auf der Seite anzeigen. Der Text wird stattdessen mit CSS-Anweisungen formatiert. Mit dem Zeichen »\A« kann ein Zeilemumbruch innerhalb eines Ausdrucks erzeugt werden.
• url(http://www.url.de): Dieses Format zeigt den Inhalt einer externen Quelle vor oder hinter dem eigentlichen Inhalt des betreffenden Elements an. Es können damit auch Bilder oder ganze Webseiten innerhalb von HTML-Elementen angezeigt werden. Bisher wird dieses Format jedoch von keinem Browser unterstützt.
• counter(name), counter(name, style), counters(name, string), counters(name, string, style): Diese Formate erzeugen eine automatische Nummerierung betreffender Elemente. Mit der CSS-Eigenschaft counter-increment kann eine definierte Variable um einen bestimmten Betrag heraufgesetzt werden, mit counter-reset kann der Zähler auf null oder eine andere Ziffer zurückgesetzt werden. Das Format counter(name) erzeugt eine Darstellung des Zählers in Dezimalschreibweise. Mit counter(name, style) kann zusätzlich ein Stil vorgegeben werden, in dem der Zähler dargestellt wird. Dafür stehen die gleichen Werte wie bei list-style-type zur Verfügung. Mit den Formaten counters(name, string) bzw. counters(name, string, style) kann ein hierarchischer Zähler für die Nummerierung auf mehreren Gliederungsebenen definiert werden (z. B. »Abschnitt 5.2.3«). Das Argument string legt dabei die Zeichenkette fest, mit der die Ebenen getrennt werden – üblicherweise wird dafür ein Punkt eingesetzt.
• attr(attribute): Dieses Format zeigt den Wert eines HTML-Attributs (z.B. title in einem <a>-Tag) vor oder hinter dem eigentlichen Inhalt des betreffenden Elements an.
• open-quote, close-quote: Diese Formate erzeugen Anführungszeichen vor oder hinter dem Inhalt eines HTML-Elements. Die Art der Anführungszeichen wird mit der CSS-Eigenschaft quotes festgelegt.
• no-open-quote, no-close-quote: Diese Formate erzeugen eine Art vorgetäuschte Anführungszeichen, die zwar nicht sichtbar sind, aber in der logischen Dokumentsyntax zur Anwendung kommen.

Standardwert: "" (leere Zeichenkette)

Kompatibilität

CSS-Version: 2

Netscape 6, Mozilla und der Opera-Browser unterstützen nur einen Teil der Formate, besonders gut "arbitrary string" und die Formate für Anführungszeichen. Der Internet Explorer für Windows bis einschließlich Version 6 unterstützt diese Eigenschaft nicht.

Beispiele

Folgende Stilregel stellt den Text »Anmerkung:« an den Anfang jedes Absatzes der Klasse note:

Folgende Stilregeln umschließen jedes span-Element der Klasse htmltag mit Anführungszeichen in Form von spitzen Klammern:

Folgende Stilregeln umschließen jedes blockquote-Element mit Anführungszeichen. Die dritte Stilregel wird nur auf blockquote-Elemente angewendet, die das Attribut cite benutzen. Dort wird content so deklariert, dass die Quelle des Zitats automatisch in der nächsten Zeile erscheint. Diese Stilregel wird jedoch von aktuellen Browsern nicht unterstützt, da sie das Format attr(attribute) enthält:

Folgende Stilregeln erzeugen nach der CSS2-Spezifikation eine über eine URL eingeblendete Kopf- beziehungsweise Fußzeile für die betreffende HTML-Seite. Auch sie werden von keinem aktuellen Brower unterstützt: