yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Mit CSS Dynamischen Inhalt erzeugen



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 (6878x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren