`text-decoration-color` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Die text-decoration-color CSS Eigenschaft legt die Farbe von Dekorationen fest, die durch text-decoration-line dem Text hinzugefügt werden.

Die Farbe gilt für Dekorationen wie Unterstriche, Überstriche, Durchstreichungen und gewellte Linien, wie sie beispielsweise 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 eindeutige Farbe für jeden Linientyp festzulegen. Dieser Effekt kann dennoch 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) auf Elementebene 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 der Kontrast zwischen der Textfarbe, dem Hintergrund, auf dem der Text platziert ist, und der Liniendekoration hoch genug ist, damit Personen mit Sehbehinderungen den Seiteninhalt lesen können. Das Farbkontrastverhältnis wird durch Vergleich der Leuchtkraft von Text- und Hintergrundfarbwerten bestimmt.

Farbe alleine sollte nicht verwendet werden, um Bedeutung zu vermitteln. Zum Beispiel ist eine Änderung der Text- und Textdekorationsfarbe alleine nicht ausreichend, um anzuzeigen, dass ein Link den Fokus hat.

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

Spezifikation
CSS Text Decoration Module Level 3 # text-decoration-color-property

Browser-Kompatibilität

Siehe auch

Beim gleichzeitigen Festlegen mehrerer Liniendekorationseigenschaften kann es praktischer sein, stattdessen die Kurzformeigenschaft 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

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

text-decoration-color CSS property

Help improve MDN

`text-decoration-color` CSS property