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 der Dekorationen fest, die durch text-decoration-line dem Text hinzugefügt werden.
Die Farbe gilt für Dekorationen wie Unterstreichungen, Überstreichungen, Durchstreichungen und wellige Linien, die ähnlich wie bei Rechtschreibfehlern verwendet werden, basierend auf dem Wert 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 Spezifizierung einer einzigartigen Farbe für jeden Linientyp. Dieser Effekt kann jedoch erreicht werden, indem Elemente verschachtelt werden, jedem Element ein anderer Linientyp (mit der text-decoration-line Eigenschaft) angewendet wird und die Linienfarbe (mit text-decoration-color) pro Element spezifiziert 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
Diese Eigenschaft wird als ein <color> Wert spezifiziert:
<color>-
Die Farbe der Linien-Dekoration.
Barrierefreiheit
Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes, dem Hintergrund, über den der Text platziert wird, und der Textdekoration-Linie hoch genug ist, damit Personen mit Sehbehinderungen den Inhalt der Seite lesen können. Das Farbkontrastverhältnis wird bestimmt, indem die Helligkeit von Text- und Hintergrundfarbwerten verglichen wird.
Farbe allein sollte nicht verwendet werden, um Bedeutung zu vermitteln. Zum Beispiel reicht eine Änderung von Text und text-decoration-color allein nicht aus, um zu kennzeichnen, dass ein Link fokussiert ist.
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
<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
| Spezifikation |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-color-property |
Browser-Kompatibilität
Siehe auch
- Beim gleichzeitigen Festlegen mehrerer Line-Dekorations-Eigenschaften kann es bequemer sein, stattdessen die
text-decorationKurzschreibweise zu verwenden. - Der
<color>Datentyp - Andere farbbezogene Eigenschaften:
background-color,border-color,outline-color,text-emphasis-color,text-shadow,caret-color, undcolumn-rule-color