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 July 2015.
Die text-decoration-color
CSS Eigenschaft legt die Farbe von Dekorationen fest, die durch text-decoration-line
zum Text hinzugefügt werden.
Die Farbe gilt für Dekorationen wie Unterstreichungen, Überstriche, Durchstreichungen und wellige Linien, die zum Beispiel zum Markieren von Rechtschreibfehlern verwendet werden, im Rahmen des Wertes der Eigenschaft.
Probieren Sie es aus
CSS bietet keinen direkten Mechanismus zur Angabe einer einzigartigen Farbe für jeden Linientyp. Dieser Effekt kann dennoch erreicht werden, indem Elemente verschachtelt werden, wobei jedem Element ein anderer Linientyp zugewiesen wird (mit der text-decoration-line
Eigenschaft), und die Linienfarbe (mit text-decoration-color
) für jedes Element individuell 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 Textdekoration hoch genug ist, damit Menschen mit Sehschwäche den Inhalt der Seite lesen können. Das Kontrastverhältnis der Farben wird ermittelt, indem die Helligkeit der Text- und Hintergrundfarben verglichen wird.
Allein Farbe sollte nicht verwendet werden, um Bedeutung zu vermitteln. Beispielsweise reicht die Änderung von Text- und Textdekoration-Farbe allein nicht aus, um anzuzeigen, dass ein Link fokussiert ist.
Formale Definition
Initialer Wert | 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
BCD tables only load in the browser
Siehe auch
- Beim gleichzeitigen Festlegen mehrerer Linientyp-Eigenschaften kann es bequemer sein, stattdessen die
text-decoration
Kurzschreibweise zu verwenden. - Der
<color>
Datentyp - Andere farbbezogene Eigenschaften:
background-color
,border-color
,outline-color
,text-emphasis-color
,text-shadow
,caret-color
, undcolumn-rule-color