Dietext-decoration-colorCSS Eigenschaft setzt die Farbe der Dekorationen, die dem Text durchtext-decoration-line hinzugefügt werden.

Die Farbe gilt für Dekorationen wie Unterstreichungen, Überstreichungen, Durchstreichungen und wellenförmige Linien wie die zur Markierung von Rechtschreibfehlern 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>  <p>    I'd far rather be    <span>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 zur Angabe einer einzigartigen Farbe für jeden Linientyp. Dieser Effekt kann dennoch durch das Verschachteln von Elementen erzielt werden, indem jedem Element ein anderer Linientyp (mit der Eigenschafttext-decoration-line) angewendet und die Linienfarbe (mittext-decoration-color) pro Element angegeben 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 Linienelemente.

Barrierefreiheit

Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Textfarbe, dem Hintergrund, auf dem der Text platziert ist, und der Textdekoration hoch genug ist, damit Personen mit Sehbehinderungen den Inhalt der Seite lesen können. Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtkraftwerte von Text- und Hintergrundfarben bestimmt.

Farbe allein sollte nicht verwendet werden, um Bedeutung zu vermitteln. Zum Beispiel reicht die alleinige Änderung von Text- und Textdekorationsfarbe nicht aus, um anzuzeigen, dass ein Link im Fokus steht.

• WebAIM: Farbkontrastprüfer
• MDN Verständnis von WCAG, Erläuterungen zu Richtlinie 1.4
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis von WCAG 2.0

Formale Definition

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

Browser-Kompatibilität

Siehe auch

• Wenn mehrere Linendekorationseigenschaften auf einmal gesetzt werden sollen, kann es praktischer sein, die Abkürzungseigenschafttext-decoration zu verwenden.
• Der<color> Datentyp
• Andere farbbezogene Eigenschaften:background-color,border-color,outline-color,text-emphasis-color,text-shadow,caret-color, undcolumn-rule-color