text-decoration-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die text-decoration-color CSS-Eigenschaft setzt die Farbe von Dekorationen, die durch text-decoration-line dem Text hinzugefügt werden.
Die Farbe gilt für Dekorationen wie Unterstreichungen, Überstreichungen, Durchstreichungen und wellenförmige Linien, wie sie zum Markieren von Rechtschreibfehlern verwendet werden, innerhalb des Gültigkeitsbereichs des Eigenschaftswerts.
Probieren Sie es aus
text-decoration-color: red;
text-decoration-color: #21ff21;
text-decoration-color: rgb(255 90 255);
text-decoration-color: hsl(70 100% 40%);
text-decoration-color: currentColor;
<section id="default-example">
<p>
I'd far rather be
<span class="transition-all" id="example-element">happy than right</span>
any day.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-decoration-line: underline;
}
CSS bietet keinen direkten Mechanismus, um für jeden Linientyp eine eindeutige Farbe anzugeben. Dieser Effekt kann dennoch erreicht werden, indem Elemente verschachtelt werden, wobei jedem Element ein anderer Linientyp (mit der text-decoration-line-Eigenschaft) zugewiesen wird und die Linienfarbe (mit text-decoration-color) pro Element festgelegt wird.
Syntax
/* <color> values */
text-decoration-color: currentcolor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgb(255 128 128 / 50%);
text-decoration-color: transparent;
/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: revert-layer;
text-decoration-color: unset;
Werte
<color>-
Die Farbe der Liniendekoration.
Barrierefreiheit
Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes, dem Hintergrund, auf dem der Text platziert ist, und der Textdekorationslinie hoch genug ist, damit Menschen mit Sehbehinderungen den Inhalt der Seite lesen können. Das Farbkontrastverhältnis wird ermittelt, indem die Leuchtdichte der Text- und Hintergrundfarbenwerte verglichen wird.
Farbe allein sollte nicht verwendet werden, um Bedeutung zu vermitteln. Zum Beispiel reicht eine Änderung von Text- und text-decoration-color allein nicht aus, um anzuzeigen, dass ein Link den Fokus hat.
Formale Definition
| Anfangswert | currentcolor |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Nein |
| Berechneter Wert | berechnete Farbe |
| Animationstyp | Farbe |
Formale Syntax
text-decoration-color =
<color>
Beispiele
Einfaches Beispiel
<p>
This paragraph has <s>some erroneous text</s> inside it that I want to call
attention to.
</p>
p {
text-decoration-line: underline;
text-decoration-color: cyan;
}
s {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
Spezifikationen
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-color-property |
Browser-Kompatibilität
Siehe auch
- Wenn mehrere Linienstileigenschaften auf einmal festgelegt werden sollen, kann es praktischer sein, die
text-decoration-Kurzform zu verwenden. - Der
<color>-Datentyp - Andere farbbezogene Eigenschaften:
background-color,border-color,outline-color,text-emphasis-color,text-shadow,caret-colorundcolumn-rule-color.