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 CSS-Eigenschaft text-decoration-color legt die Farbe von Dekorationen fest, die mit text-decoration-line zu Text hinzugefügt werden.
Die Farbe gilt für Dekorationen wie Unterstreichungen, Ãberstreichungen, Durchstreichungen und wellenförmige Linien, wie sie zur Kennzeichnung von Rechtschreibfehlern verwendet werden, innerhalb des Geltungsbereichs des Eigenschaftswerts.
CSS bietet keinen direkten Mechanismus, um für jeden Linientyp eine eindeutige Farbe festzulegen. Dieser Effekt kann dennoch durch Verschachteln von Elementen erreicht werden, indem auf jedes Element ein anderer Linientyp (mit der Eigenschaft text-decoration-line) angewendet und die Linienfarbe (mit text-decoration-color) pro Element festgelegt wird.
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;
}
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 angegeben:
<color>-
Die Farbe der Liniendekoration.
Barrierefreiheit
Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes, dem Hintergrund, auf dem der Text platziert ist, und der Textdekorationslinie hoch genug ist, damit Menschen mit Sehbeeinträchtigungen den Inhalt der Seite lesen können. Das Farbkontrastverhältnis wird durch den Vergleich der Helligkeit der Farbwerte von Text und Hintergrund bestimmt.
Farbe allein sollte nicht zur Vermittlung von Bedeutung verwendet werden. Beispielsweise reicht eine Ãnderung von Text und text-decoration-color allein nicht aus, 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
Grundlegendes 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 Liniendekorationseigenschaften kann es praktischer sein, stattdessen die Kurzform-Eigenschaft
text-decorationzu verwenden. - Der Datentyp
<color> - Weitere farbbezogene Eigenschaften:
background-color,border-color,outline-color,text-emphasis-color,text-shadow,caret-colorundcolumn-rule-color