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:

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:

text-decoration-line: W3C und Mozilla-Docs
text-decoration-style: W3C und Mozilla-Docs
text-decoration-color: W3C und Mozilla-Docs

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

4 Kommentare

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 😉

Man sollte vor dem Posten von klugen Kommentaren doch den Beitrag ganz lesen. Vlad hatte das mit border ja schon geschrieben… Sorry 😳

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

[…] In der CSS Text Level 3 Spezifikation gibt es seit einiger Zeit die Eigenschaft text-decoration-color mit der man die Text-(Link-)Unterlinie andersfarbig gestalten kann. Bisher wird diese Eigenschaft laut MDN nur vom Firefox ab der Version 6 mit dem Prefix -moz- unterstützt. Zukünftig soll es ähnlich wie auch für border oder outline möglich sein für text-decoration Shorthand-Values wie folgt anzugeben: text-decoration: <text-decoration-line> || <text-decoration-color> || <text-decoration-style> || blink anzugeben. Das ist ein Vorteil, wenn weitere Browser das unterstützen. Auf perun.net gibt es bereits einen umfassenden Artikel über CSS3 text-decoration. […]

Kommentare sind geschlossen.