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 January 2020.
Die text-decoration-color
CSS-Eigenschaft legt die Farbe von Dekorationen fest, die mithilfe von text-decoration-line
zum Text hinzugefügt werden.
Die Farbe gilt für Dekorationen wie Unterstreichungen, Überstreichungen, Durchstreichungen und wellige Linien, die z.B. 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 einzigartige Farbe für jeden Linientyp anzugeben. Dieser Effekt kann dennoch erzielt werden, indem Elemente verschachtelt werden, jeweils ein anderer Linientyp auf jedes Element angewendet wird (mit der text-decoration-line
-Eigenschaft) und die Linienfarbe (mit text-decoration-color
) für jedes Element individuell festgelegt 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 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 Textdekoration wirtschaftlich genug ist, damit Menschen mit Sehbehinderungen den Inhalt der Seite lesen können. Das Farbkontrastverhältnis wird bestimmt, indem die Leuchtkraft der Text- und Hintergrundfarbenwerte verglichen wird.
Allein die Farbe sollte nicht zur Übermittlung von Bedeutungen verwendet werden. Beispielsweise reicht die Ä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
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
Specification |
---|
CSS Text Decoration Module Level 3 # text-decoration-color-property |
Browser-Kompatibilität
Siehe auch
- Wenn mehrere Liniendekorationseigenschaften gleichzeitig festgelegt werden sollen, kann es praktischer sein, stattdessen die Kurzschreibweiseigenschaft
text-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