DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft text-decoration-color setzt die Farbe der Unterstreichung, Oberstreichung oder des Durchstreichens von Text, auf den die Eigenschaft text-decoration angewendet wird. Sie kann auch die Unterstreichungsfarbe von Links festlegen.
a {
text-decoration-color: #E18728;
}Werte
text-decoration-color kann inherit sein oder jeden CSS-Farbwert akzeptieren, einschließlich benannter Farben, HEX-Farben, RGBa und HSLa.
Kurzschreibweise
In Browsern, die text-decoration-style und text-decoration-color unterstützen, können Sie einer Kurzschreibweise für text-decoration eine Farbe hinzufügen.
.underlined {
text-decoration: underline dotted red;
}Derzeit unterstützt nur Firefox dies ohne Präfix. Safari unterstützt es mit dem -webkit-Präfix. Chrome benötigt ebenfalls das -webkit-Präfix und aktivierte experimentelle Webplattform-Funktionen in den Chrome-Flags.
Demo
text-decoration-color funktioniert in dieser Demo in den aktuellen Versionen von Firefox und Safari. Es funktioniert auch in Chrome mit aktiviertem Flag "experimentelle Webplattform-Funktionen".
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31† | 7.1* | 6.0‡ | Keine | Keine | Keine | 8* |
† Mit aktivierten "experimentellen Webplattform-Funktionen" in chrome://flags. Chrome 31 benötigte das -webkit-Präfix. Wir haben Chrome 50 getestet und es funktionierte nur ohne Präfix.
‡ 6+ mit -moz-Präfix, seit 36 ohne Präfix.
Weitere Informationen
Verwandt
text-decoration
.element { text-decoration: underline; }
text-decoration-line
.element { text-decoration-line: underline; }
text-decoration-skip
.element { text-decoration-skip: ink; }
text-decoration-skip-ink
.element {text-decoration-skip-ink: none; }
text-decoration-style
.element { text-decoration-style: wavy; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
Das lässt mich endlich
text-decorationverwenden wollen :) Endlich wird die Unterstreichung ein interessantes Aussehen haben.Leider scheint es, dass bisher weder
transitionnoch:visitedmit text-decoration funktioniert.Warum wird das nicht unterstützt? Es scheint etwas zu sein, das gegeben sein sollte, da
text-decorationbrowserübergreifend unterstützt wird.Ich teste dies in Chrome 54 und es funktioniert weder mit noch ohne Präfix.
Hallo, ich teste dies in Chrome 55 und es funktioniert weder mit noch ohne Präfix, in Safari 10 funktioniert es nur mit Präfix und in Firefox 50.1 funktioniert es ohne Präfix.