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

css
/* <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

Anfangswertcurrentcolor
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Berechneter Wertberechnete Farbe
AnimationstypFarbe

Formale Syntax

text-decoration-color = 
  <color>

Beispiele

Einfaches Beispiel

html
<p>
  This paragraph has <s>some erroneous text</s> inside it that I want to call
  attention to.
</p>
css
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