text-decoration-color

Zusammenfassung

Mit der CSS-Eigenschaft text-decoration-color kann die Farbe für Unterstreichungen, Überstreichungen oder Durchstreichungen gesetzt werden, spezifiziert durch text-decoration-line. Das ist die bevorzugte Art und Weise, Textdekorationen eine Farbe zuzuweisen.

Initialwert	`currentColor`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Medien	visuell
Berechneter Wert	Falls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende `rgba()` Wert. Falls nicht, ist er der entsprechende `rgb()` Wert. Das `transparent` Schlüsselwort wird zu `rgb(0,0,0)`.
Animierbar	ja, als Farbe
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Formale Syntax: <color>wobei 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
wobei 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
wobei 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

text-decoration-color: currentColor
text-decoration-color: red
text-decoration-color: #00ff00
text-decoration-color: rgba(255, 128, 128, 0.5)
text-decoration-color: transparent

text-decoration-color: inherit

Werte

<color>: Die Eigenschaft color akzeptiert verschiedene Schlüsselwörter und numerische Daten. Siehe <color>-Werte für genauere Details.

Beispiel

.beispiel { 
    text-decoration: underline;
    text-decoration-color: red;
}

Das obige Beispiel hat denselben Effekt wie der folgende Code, der auch noch einen Hover-Style hinzufügt.

<!DOCTYPE html>
<html>
<head>
<style>
.beispiel {
  font-size: 24px;
  text-decoration: underline;
  color: red;
}
.beispiel:hover {
  color: blue;
  text-decoration: line-through;
}
</style>
</head>
<body>
<span class="beispiel">
  <span style="color:black">schwarzer Text mit roter Linie und blauem Hovereffekt</span>
</span>
</body>
</html>

Spezifikationen

Spezifikation	Status	Anmerkung
Unknown Die Definition von 'text-decoration-color' in dieser Spezifikation.	Unbekannt

Funktion	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Elementare Unterstützung	?	6.0 (6.0)-moz	?	?	?

Funktion	Android	Firefox mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Elementare Unterstützung	?	6.0 (6.0)-moz	?	?	?