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.

Initialwertcurrentcolor
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Medienvisuell
Berechneter Wertberechnete Farbe
AnimationstypFarbe
Kanonische Reihenfolgedie 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( <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!

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 ? ? ?
Verwandte Themen