WordPress & Webwork

CSS3: Art, Stil und Farbe des Unterstrichs beeinflussen

Es gehört zu den Grundlagen von CSS zu wissen, wie man ein Wort, Satz oder Verweis unterstreicht. Hier ein sehr einfaches und verkürztes Beispiel:

a       {color: #900; text-decoration: none;}
a:hover {text-decoration: underline;}

Damit zu keinen Missverständnissen kommt, sollte man im Web vorsichtig sein wenn Teile unterstreicht, die keine Verweise sind. Da sehr viele Nutzer dann fast instinktiv darauf klicken, weil sie dort einen Link erwarten. Aber dies nur am Rande.

Es geht hier um etwas anderes. Bis jetzt hatte man keinen direkten Einfluss auf die Farbe des Unterstrichs, den bekam er durch den Wert der Eigenschaft color (Vordergrund- bzw. der Textfarbe). Wollte man hier den Unterstrich anders einfärben musste man zum Beispiel, die eigentliche Unterstreichung ausblenden und mit der Eigenschaft border (Rahmen) arbeiten. Das war zwar eine Lösung, die aber so ihre Tücken hatte, unter anderem wenn man Bilder verlinkt hatte … die bekamen, im Gegensatz zu text-decoration, dann auch einen "Unterstrich" ab.

Seit gewisser Zeit existieren drei CSS3-Eigenschaften (Status: "Editor's Draft"), die das Problem lösen können: text-decoration-line, text-decoration-style und text-decoration-color. Diese werden seit der Version 6.0 auch von Firefox unterstützt und in der Zukunft auch von allen anderen Browsern (SeaMonkey & Co.) die auf Gecko 6 und höher aufsetzen.

Hier ein Beispiel, zuerst das CSS:

a.beispiel {
    -moz-text-decoration-line: underline;
    -moz-text-decoration-style: double;
    -moz-text-decoration-color: #900;
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-color: #900;
}

und jetzt das Beispiel wo es wirken sollte:

Ich sollte einen farbigen und doppelten Unterstrich haben

Und hier zum Vergleich, für Leute, deren Browser das nicht unterstützt, wie es bei mir in Firefox 6 ausschaut:

CSS3: farbige Unterstriche

Das ist jetzt sowohl vom Stil und von den Farben her ein etwas kräftigeres Beispiel. :-) Aber es hindert keiner einen auch dezenter vorzugehen.

Ich habe es vorhin getestet und zumindest der aktuelle Google Chrome (13.0.782.112) und Opera (11.50) unterstützen keine der drei Eigenschaften weder mit dem Vendor-Präfix (-webkit- bzw. -o-) noch ohne.

Weiterführende Quellen:

4 Reaktion(en)

  1. Peter

    Solange das noch nicht unterstützt wird und jemand trotzdem andersfarbige Linkunterstreichungen haben möchte, einfach text-decoration auf none und die Linien mit border-bottom bauen (Anleitung). Geht wunderbar in allen Browsern :wink:

  2. Klaus

    Dann hoffe ich mal, dass das demnächst noch mit einigen anderen Browsern funktioniert.
    Wobei ich ein Unterstreichung mit border-bottom bevorzuge, da sie etwas weiter vom Text entfernt ist.

    Herzliche Grüße
    Klaus

  3. Pingback: Gradient Border – CSS3 Adventskalender Tag 1 | maddesigns

Die Kommentare in diesem Beitrag sind geschlossen.