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 (en-US) und ::first-line (en-US).
Vererbt	Nein
Berechneter Wert	berechnete Farbe
Animationstyp	Farbe

Syntax

Formale Syntax: <color>wobei 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
wobei 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
wobei 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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

Browserkompabilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)

Desktop
Mobile

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

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