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

Die Farbe gilt für Verzierungen wie Unterstreichungen, Überstreichungen, Durchstreichungen und gewellte Linien, wie sie zum Markieren von Rechtschreibfehlern verwendet werden, im Bereich 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 zum Festlegen einer einzigartigen Farbe für jeden Linientyp. Dieser Effekt kann dennoch durch Verschachteln von Elementen erreicht werden, indem ein unterschiedlicher 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 Linienverzierung.

Barrierefreiheit

Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Textfarbe, dem Hintergrund, über den der Text gelegt ist, und der Textverzierungslinie hoch genug ist, damit Personen mit Sehbehinderungen den Inhalt der Seite lesen können. Das Kontrastverhältnis der Farben wird durch den Vergleich der Leuchtkraft der Text- und Hintergrundfarbenwerte bestimmt.

Farbe allein sollte nicht verwendet werden, um Bedeutung zu vermitteln. Zum Beispiel reicht die Änderung von Text- und Textverzierungsfarbe 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