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 mithilfe von text-decoration-line zum Text hinzugefügt werden.

Die Farbe gilt für Dekorationen wie Unterstreichungen, Überstreichungen, Durchstreichungen und wellige Linien, die z.B. 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 dennoch erzielt werden, indem Elemente verschachtelt werden, jeweils ein anderer Linientyp auf jedes Element angewendet 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 wirtschaftlich genug ist, damit Menschen mit Sehbehinderungen den Inhalt der Seite lesen können. Das Farbkontrastverhältnis wird bestimmt, indem die Leuchtkraft der Text- und Hintergrundfarbenwerte verglichen wird.

Allein die Farbe sollte nicht zur Übermittlung von Bedeutungen verwendet werden. Beispielsweise reicht die Änderung von Text und text-decoration-color allein nicht aus, um anzuzeigen, dass ein Link den Fokus hat.

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