Mit CSS Dynamischen Inhalt erzeugen

Es ist möglich, mit CSS Texte oder Grafiken vor und nach einem bestimmten Befehl anzeigen zu lassen.
Wie das möglich ist, klärt dieser Artikel.

CSS kann eine Menge. Aber das gesamte Potenzial von CSS kennt man noch lange nicht. Besonders, seitdem es CSS 2 gibt, sind viele neue Dinge möglich.
So kann man mit CSS Texte vor bzw. hinter ein Element einblenden. Automatisch.

Möglich machen es die Pseudoklassen :before und :after. Wie man schon erkennt, fügt :before einen Text vor das Element, :after einen Text dahinter ein.

Beispiel:

Code:

<style type="text/css"> p:before { content: 'Anfang des Absatzes: '; } p:after { content: 'Ende des Absatzes'; } </style>

Dieses Stylesheet sorgt dafür, dass vor jedem Absatz

Code:

Anfang des Absatzes:

steht, am Ende

Code:

Ende des Absatzes

.
Selbstverständlich lassen sich die Ausgaben auch formatieren, dafür nutzt man die normalen CSS-Formationsregeln:

Code:

<style type="text/css"> p:before { content: 'Anfang des Absatzes: '; color: #FF0000; font-weight: italic; } p:after { content: 'Ende des Absatzes'; background-color: #FFFF00; } </style>

Hier wird der Text

Code:

Anfang des Absatzes:

in der farbe rot und kursiv ausgegeben,

Code:

Ende des Absatzes

erhält eine gelbe Hintergrundfarbe.

Anwenden lässt sich das z.B. wie in der Navigation auf sachen-fuer-webmaster.de, wo die Links auf das Überfahren mit der Maus reagieren, indem sie ein [ voran- und ein ] nachgestellt bekommen.
Die Möglichkeiten sind, wie man es von CSS gewohnt ist, unbegrenzt; Man muss nur eine Idee haben.

Geschrieben von Phil Marx am 18.06.2004 (5404x gelesen)