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 legt die Farbe von Dekorationen fest, die durch text-decoration-line zum Text hinzugefügt werden.

Die Farbe gilt für Dekorationen wie Unterstreichungen, Überstreichungen, Durchstreichungen und wellenförmige Linien, wie sie zur Markierung von Rechtschreibfehlern verwendet werden, im Rahmen des Werts der Eigenschaft.

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 eine einzigartige Farbe für jeden Linientyp anzugeben. Dieser Effekt kann jedoch erreicht werden, indem Elemente verschachtelt werden, jedem Element ein anderer Linientyp zugewiesen wird (mit der text-decoration-line Eigenschaft), und die Linienfarbe (mit text-decoration-color) für jedes Element einzeln angegeben 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 Linieneffekte.

Barrierefreiheit

Es ist wichtig, sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes, dem Hintergrund, auf dem der Text platziert ist, und der Dekorationslinie des Textes hoch genug ist, damit Menschen mit Sehbehinderungen den Inhalt der Seite lesen können. Das Farbkontrastverhältnis wird durch den Vergleich der Helligkeit der Text- und Hintergrundfarben bestimmt.

Allein die Farbe sollte nicht verwendet werden, um eine Bedeutung zu vermitteln. Zum Beispiel reicht die alleinige Änderung der Text- und text-decoration-color 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

Siehe auch