CSS 2 hat noch so einige kaum bekannte Stärken. So können
Sie sogar "dynmisch" Inhalte erzeugen, und diese dann
auch formatieren.
CSS 1 konnte Inhalt formatieren, und komplett anders darstellen
als HTML. CSS 2 ist um einiges stärker ausgedehnt als CSS 1.
Mit CSS 2 kann ein Eingriff in den Inhalt gemacht werden.
Mit zwei neuen Pseudo Klassen ist es möglich, Inhalt zu erzeugen.
Die Syntax hierfür ist wie bei den anderen Pseudoklassen, wie
:hover, :visited usw. Zunächst kommt das Element, oder die
Klasse, und dann der Inhalt. Die Pseudoklasse :before fügt
den erzeugten Inhalt vor das Element, die Pseudoklasse :after hintver
das Element.
Ein Beispiel
<style type="text/css">
p:before {content: 'Inhalt: '}
p:after {content: 'Und wenn Sie nicht gestorben sind...'}
</style>
Bei diesem Beispiel wird jedem Blocksatz, also jedem <p> Element
der Text "Inhalt:" vorangestellt, und am Ende die Zeile
"Und wenn Sie nicht gestorben sind…", angefügt.
Wie das ganze geht ist eigentlich schnell erkannt. Eine praktische
Anwendung ist z.B. hierbei die Arbeit mit logischen Textauszeichnungen.
Das <code></code> Element zeichnet z.B.
den Quellcode irgendeiner Programmiersprache aus. Mit der Inhaltserzeugung
von CSS 2 können Sie dieser Auszeichnung die Eigenschaft geben,
das dem Element immer ein "Quellcode" vorangestellt wird,
das der Code also immer mit "Quellcode:" beginnt.
<style type="text/css">
code:before {content: 'Quellcode: '}
</style>
Auch bei der Auszeichnung <samp></samp>
macht dies Sinn. Dieses Element zeichnet ein Beispiel aus. Diesem
können Sie z.B. sagen, das ihm immer ein "Beispiel: "
vorangestellt wird.
<style type="text/css">
samp:before {content: 'Quellcode: '}
</style>
Es gibt mit dieser neuen CSS Eigenschaften so viele Möglichkeiten,
die man gar nicht auf einmal entdecken kann. Diesen angefügten
Inhalt können Sie natürlich auch mit CSS beliebig formatieren.
Der angefügte Text bei dieser Klasse soll z.B. nur in Großbuchstaben,
fettgedruckt, und Rot dargestellt werden.
<style type="text/css">
.wichtig:before {content: 'Wichtig '; color: red; text-transform:
uppercase; font-weight: bold}
.wichtig:after {content: 'Wichtig '; color: red; text-transform:
uppercase; font-weight: bold}
</style>
Mit CSS erzeugter Inhalt…
Unterstützt werden diese neuen CSS 2 Pseudoklassen bisher nur
von dem Netscape Navigator 6. Doch werden die restlichen Browser
in den nächsten Versionen bestimmt nachziehen.