content  nach oben

Die content-Eigenschaft wird dazu verwendet, Inhalt nachträglich in Elemente einzubinden bzw. den Inhalt von Elementen nachträglich zu verändern. Dazu stehen die folgenden Werte zur Verfügung:

  • Text - Fügt den definierten Text in das Element ein.
  • URL - Fügt eine externe Quelle, beispielsweise ein Bild, ein. Dabei muss die URL dieser Quelle definiert werden.
  • Counter - Fügt einen Counter ein. Zu Countern lesen Sie bitte im Kapitel CSS - Counter & Listen - Counter.
  • attr() - Fügt den Wert eines Attributes ein. Dazu muss innerhalb der Klammern der Name des Attributes notiert werden, dessen Wert eingefügt werden soll.
  • open-quote - Fügt ein öffnendes Anführungszeichen ein.
  • close-quote - Fügt ein schließendes Anführungszeichen ein.
  • no-open-quote - Fügt nichts ein und verringert die Anzahl der öffnenden Anführungszeichen um eins.
  • no-close-quote - Fügt nichts ein und verringert die Anzahl der schließenden Anführungszeichen um eins.

Beispiel:

/*in CSS*/
P:before { content:open-quote; quotes: '>' '<'; }
P:after { content:close-quote; quotes: '>' '<'; }
P.a:before { content: url('http://www.name.de/name.gif'); }
P.b:after { content: no-close-quote; }
IMG:after { content: '<br>' attr(alt); }
LI:before { content: counter(MeinCounter, upper-roman);
            counter-increment: MeinCounter; }

/*In HTML*/
<p>Normaler Text</p>
<p class="a">Text mit Bild davor</p>
<p class="b">Text ohne Anführungszeichen am Ende</p>
<img src="name.gif" alt="Darstelung: ein Bild.">
<ul>
 <li> Eintrag </li>
 <li> Eintrag </li>
 <li> Eintrag </li>
</ul>

Bitte beachten Sie, dass die content-Eigenschaft nur in Verbindung mit den Pseudo-Elementen :before und :after verwendet werden darf.

quotes  nach oben

Die quotes-Eigenschaft beschreibt, wie Anführungszeichen auszusehen haben. Das wird als Wert ein oder mehrere Anführungszeichen-Paare notiert. Jedes Paar besteht aus zwei Strings (Text) die jeweils das Aussehen beschreiben. Dabei wird der erste als öffnendes Anführungszeichen und der zweite als schließendes Anführungszeichen angesehen. Beide werden durch eine Leertaste voneinander getrennt. Beispiel:

CITE { quotes: '>' '<'; }
CITE:before { content:open-quote; }
CITE:after { content:close-quote; }
/* alle CITE Elemente werden jetzt >CITE< */ 

Werden mehrere Paare notiert, so werden sie ebenfalls durch ein Leerzeichen voneinander getrennt. Alle weiteren Paare bestimmen dann eventuelle Anführungszeichen innerhalb der bestehenden Anführungszeichen. Beispiel:

CITE, EM { quotes: '>>' '<<' '»' '«'; }
CITE:before, EM:before { content:open-quote; }
CITE:after, EM:after { content:close-quote; }

/* ... macht aus: */
<cite> Text <em> Text </em> Text </cite>

/* ... das: */
<cite> >>Text <em> »Text« </em> Text<< </cite>