Pseudo Elemente
<style type="text/css">
<!--
a:active { font-family: Arial, Helvetica, sans-serif; color: #000099; background-color: #33FF00}
a:hover { font-family: Tahoma, Verdana, Arial, sans-serif; font-weight: bold; color: #FFCC00; background-color: #CC3300}

.info:first-letter {
font-size:50px;
color:#663333;
font-family: Georgia, "Times New Roman", Times, serif;
vertical-align: middle;
float: left;

}

td.Preis:before { content:"Preis: "; }  
td.Preis:after { content:",- EUR"; }

-->
</style>

Hier ein LINK zur vorigen Seite

Pseudo-Elemente sind Selectoren, die abhängig sind von bestimmten Zusammenhängen, z.B. ein "noch nicht besuchter Verweis" oder der erste Buchstabe eines Absatzes. Notieren Sie zuerst das betroffene HTML-Tag, im Beispiel das a-Tag für Verweise. Dahinter folgt ein Doppelpunkt und dahinter das Schlüsselwort, welches das Pseudoelement definiert.

Die auf meiner Homepage benutzten Effekte mit fließendem Übergang von einer Farbe zur anderen wurden mittels Java Script erstellt. Hier erfahrt ihr mehr.


Mit Pseudo Elementen kann man auch den ersten Buchstaben eines Absatzes, die erste Zeile und das erste Kindelement formatieren. Die Einzelheiten werden im Selfhtml ausführlich erklärt. Hier nur ein Beispiel, wie man den ersten Buchstaben eines Absatzes schön formatiert und linksbündig einsetzt. Die Klasse mit dem frei vergebenen Namen "info" wurde diesem Absatz zugewiesen <p class="info">. Es folgen die 3 Möglichkeiten.
:first-line = die erste Textzeile des Elements erhält die CSS-Eigenschaften
:first-letter = der erste Buchstabe des Textes erhält die CSS-Eigenschaften
:first-child = das erste Kindelement des Elements erhält die CSS-Eigenschaften


Automatisch erzeugter Text mit :before und :after

Mit den Elementen :before und :after lassen sich bestimmteTextteile vor und hinter der Eingabe festlegen. Beispielsweise in Preislisten. In der Tabellenzelle die den Preis enthält braucht nur der Preis eingegeben werden.
<td class="Preis"> Durch die Zuweisung der Klasse "Preis" wird automatisch vor der Eingabe der Text "Preis: " eingefügt und nach der Eingabe ",-EUR" . So spart man sich eine Menge Schreibarbeit.
Leider werden diese Angaben vom IE 6 noch nicht interpretiert!

Hamburger 3,50
Bratwurst 2,50
Pommes 1,00
Frikadelle 2,00
Salat 2,00

Weitere Pseudoelemente ab CSS 3

In CSS 3 gib es weitere Selektoren. siehe dazu diesen Tipp


Startseite nächste Seite