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 ⁨Januar 2020⁩.

Die text-decoration-color CSS Eigenschaft setzt die Farbe der Dekorationen, die dem Text durch text-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 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 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 Eigenschaft text-decoration-line) angewendet und die Linienfarbe (mit text-decoration-color) pro Element 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 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.

Formale Definition

Anfangswert	`currentcolor`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Berechneter Wert	berechnete Farbe
Animationstyp	Farbe

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

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden