Pseudo-Elemente
:link | :visited | :hover | :focus | :active | :lang | :first-line | :first-letter | :before | :after
:linkzur Übersicht 
Die Pseudoklasse :link formatiert das Aussehen eines noch nicht besuchten Hyperlinks.
Werte
Alle StyleSheet-Angaben sind zulässig.
Standardwert ist keiner gesetzt.
Vererbung
Ja
Beispiel
a:link{ color: #maroon; font-weight: bold;}
:visitedzur Übersicht
:visited zeichnet bereits besuchte Hyperlinks aus. Diese Angabe muss nach a:link
erfolgen, um diese Angabe zu überschreiben.
Werte
Alle StyleSheet-Angaben sind zulässig.
Standardwert ist keiner gesetzt.
Vererbung
Ja
Beispiel
a:link{ color: #maroon; font-weight: bold;}
a:visited{ color: #navy; font-weight: normal;}
:hoverzur Übersicht
Die Angabe :hover markiert den Zustand wenn die Maus über den Hyperlink fährt ohne
gedrückt zu werden. Diese Angabe erfolgt nach a:link und a:visited, um diese zu überschreiben.
Werte
Alle StyleSheet-Angaben sind zulässig.
Standardwert ist keiner gesetzt.
Vererbung
Ja
Beispiel
a:link{ color: #maroon; font-weight: bold;}
a:visited{ color: #navy; font-weight: normal;}
a:hover{ color: #navy; font-weight: normal; text-decoration: underline;}
:focuszur Übersicht
Die Pseudoklasse :focus ist die Entsprechung zu :hover bei Nutzung der Tastatur durch
die Tabulatortaste. Sie bietet sich für die Formatierung von vorausgewählten Formularfeldern an. Leider
wird diese Eigenschaft zuverlässig nur von Mozilla-Browsern ausgeführt. Wird die Eigenschaft :focus
notiert, so sollte sie vor a:hover stehen.
Werte
Alle StyleSheet-Angaben sind zulässig.
Standardwert ist keiner gesetzt.
Vererbung
Ja
Beispiel
a:link{ color: #maroon; font-weight: bold;}
a:visited{ color: #navy; font-weight: normal;}
a:focus{ color: #navy; background-color: #ce2e2c7;}
a:hover{ color: #navy; font-weight: normal; text-decoration: underline;}
:activezur Übersicht
:active markiert einen Hyperlink im Zustand wenn er gerade von der Maus gedrückt wird. Er
wird entsprechend des Beispiels nach a:hover notiert.
Werte
Alle StyleSheet-Angaben sind zulässig.
Standardwert ist keiner gesetzt.
Vererbung
Ja
Beispiel
a:link{ color: #maroon; font-weight: bold;}
a:visited{ color: #navy; font-weight: normal;}
a:hover{ color: #navy; font-weight: normal; text-decoration: underline;}
a:active{ color: #navy;font-weight: normal; text-decoration: none;}
:langzur Übersicht
:lang markiert ein Element je nach angegebener Sprache. So können z.B. unterschiedliche An- und
Abführungszeichen in den verschiedenen Sprachen mit Hilfe dieser Eigenschaft gesetzt werden. Die Sprachkürzel werden in einfachen Klammern notiert.
Werte
Alle StyleSheet-Angaben sind zulässig.
Standardwert ist keiner gesetzt.
Vererbung
Ja
Beispiel
p:lang(de){quotes: '„' ' “'}
p:lang(fr){quotes: '«' ' »'}
<p lang="de"><q>So ist das Leben.</q></p>
<p lang="fr"><q>C'est la vie.</q></p>
:first-linezur Übersicht
Mit :first-line kann das Aussehen der ersten Zeile eines Elementes bestimmt werden.
Werte
Alle StyleSheet-Angaben sind zulässig.
Standardwert ist keiner gesetzt.
Vererbung
Ja
Beispiel
p{ text-indent: 20px;}
p:first-line{ font-weight: bold;}
:first-letterzur Übersicht
Entsprechend der ersten Zeile kann mit der Eigenschaft :first-letter der erste Buchstabe eines
Elementes formatiert werden. Leider fällt die Positionierung bezüglich der Textzeile in den
verschiedenen Browsern unterschiedlich aus.
Werte
Alle StyleSheet-Angaben sind zulässig.
Standardwert ist keiner gesetzt.
Vererbung
Ja
Beispiel
p:first-letter{
font-family: Georgia, serif;
font-size: 400%;
font-weight: bold;
margin: 0 8px 0 0;
float: left;
}
:beforezur Übersicht
Mit dem Pseudo-Element :before lassen sich automatische Inhalte vor einem Element einfügen.
Dabei kann es sich um statischen Text, Grafiken, Zähler und variablen Inhalt handeln. Der einzufügende Inhalt wird
mit content angegeben. Diese Angabe bietet ein mächtiges Instrument zum Automatisieren
von Inhalten, wird aber leider auch mit dem Internet Explorer 7 immer noch nicht unterstützt.
Werte
content: [Werte für content] und alle StyleSheet-Angaben.
Standardwert ist nicht gesetzt.
Vererbung
Nein
Beispiel
h1:before{
content:url(kreis.gif)" ";
font-size: 12px;
font-weight: bold;
}
Dieses Beispiel fügt vor die Überschrift eine Grafik und ein Leerzeichen ein.
:afterzur Übersicht
:after fügt Inhalte hinter ein Element ein. Es gilt auch hier, was unter :before
aufgeführt wurde.
Werte
content: [Werte für content] und alle StyleSheet-Angaben.
Standardwert ist nicht gesetzt.
Vererbung
Nein
Beispiel
h1:hover:after{ content: " - "attr(title); color:#666;}
<h1 title="Sinnfreier Text">Ein kleiner Blindtext</h1>
Dieses Beispiel fügt nach der Überschrift einen Text ein, der beim Überfahren mit der Maus erscheint.