Textdekoration-Farbe - CSS-Tricks

Anonim

Die text-decoration-colorEigenschaft legt die Farbe des Unterstrichs, Überstrichs oder Durchstrichs im Text mit der text-decorationangewendeten Eigenschaft fest. Es kann auch die Unterstreichungsfarbe für Links festlegen.

a ( text-decoration-color: #E18728; )

Werte

text-decoration-colorkann inheritoder akzeptiert jeden CSS-Farbwert, einschließlich benannter Farben, HEX-Farben, RGBa und HSLa.

Kurzschrift

In Browsern , die Unterstützung text-decoration-styleund text-decoration-colorSie können eine Farbe zu einer hinzufügen text-decorationKurzschrift - Eigenschaft:

.underlined ( text-decoration: underline dotted red; )

Derzeit unterstützt nur Firefox dies ohne Vorzeichen. Safari unterstützt es mit dem -webkitPräfix. Chrome benötigt außerdem das -webkitPräfix und die experimentellen Webplattformfunktionen, die in Chrome-Flags aktiviert sind.

Demo

Die text-decoration-colorin dieser Demo funktioniert in den aktuellen Versionen von Firefox und Safari. Es funktioniert auch in Chrome mit aktiviertem Flag "Experimentelle Webplattform-Funktionen".

Siehe die Stift-Textdekorationsfarbe von CSS-Tricks (@ css-Tricks) auf CodePen.

verbunden

  • text-decoration
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Mehr Informationen

  • text-decoration-color im CSS-Textdekorationsmodul Level 3 CR
  • text-decoration-color bei MDN

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
31 † 7.1 * 6,0 ‡ Keiner Keiner Keiner 8 *

† mit aktivierten "experimentellen Webplattform-Funktionen" in chrome: // flags. Chrome 31 benötigte das Präfix -webkit-. Wir haben Chrome 50 getestet und es hat nur ohne Fix funktioniert.
‡ 6+ mit dem Präfix -moz, ab 36 nicht mehr fixiert.