Webdesign – Cascading Styles Sheets
CSS – Content-Eigenschaft

Elementeigenschaften ___

Die content-Eigenschaft wird dazu verwendet, Inhalt nachträglich in Elemente einzubinden beziehungsweise 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 ein, beispielsweise ein Bild. Dabei muss der URL dieser Quelle definiert werden.
– Counter: Fügt einen Counter ein.
– attr(): Fügt denWert eines Attributs ein. Dazu muss innerhalb der Klammern der Name des Attributs 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.

Das folgende Beispiel zeigt einige Anwendungsfälle der content-Eigenschaft, die seit CSS Level 2 zur Verfügung steht:

/*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: ‘
‘attr(alt); }
LI:before { content:counter(MeinCounter, upper-roman);
counter-increment: MeinCounter; }

/*In HTML*/

Normaler Text

Text mit Bild davor

Text ohne Anführungszeichen am Ende

• Eintrag
• Eintrag
• Eintrag
  < /ul>

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