- die Online CSS Referenz
Impressum

Pseudo-Elemente

:link | :visited | :hover | :focus | :active | :lang | :first-line | :first-letter | :before | :after

:linkzur Übersicht    eins nach unten

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 Übersichteins nach obeneins nach unten

: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 Übersichteins nach obeneins nach unten

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 Übersichteins nach obeneins nach unten

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 Übersichteins nach obeneins nach unten

: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 Übersichteins nach obeneins nach unten

: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>

:lang

:first-linezur Übersichteins nach obeneins nach unten

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-line

:first-letterzur Übersichteins nach obeneins nach unten

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;
}

:first-letter

:beforezur Übersichteins nach obeneins nach unten

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;
}

:before

Dieses Beispiel fügt vor die Überschrift eine Grafik und ein Leerzeichen ein.

:afterzur Übersichteins nach oben

: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>

:after

Dieses Beispiel fügt nach der Überschrift einen Text ein, der beim Überfahren mit der Maus erscheint.