CSS text-decoration-color Eigenschaft
Mit der CSS-Eigenschaft text-decoration-color legen Sie die Farbe der Textdekoration fest. Werte und Beispiele.
Die CSS-Eigenschaft text-decoration-color legt die Farbe der Linien fest, die Text dekorieren — Unterstriche, Überstriche und Durchstreichungslinien. Standardmäßig übernimmt eine Dekorationslinie die gleiche Farbe wie der Text selbst; diese Eigenschaft kommt zum Einsatz, wenn die Linie in einer anderen Farbe als die Wörter erscheinen soll.
Diese Seite behandelt die Syntax, die möglichen Werte, das Zusammenspiel mit der text-decoration-Kurzschreibweise und ausführbare Beispiele.
Warum eine separate Farbeigenschaft?
Ohne text-decoration-color hat ein Unterstrich immer dieselbe Farbe wie der Text. Das ist meistens in Ordnung, aber Designer möchten oft eine dezentere oder kräftigere Linie — einen grauen Unterstrich unter schwarzem Text, einen roten Durchstrich über einem zitierten Preis oder einen farbigen Unterstrich zur Kennzeichnung eines Link-Zustands. Die Farbe in eine eigene Langschreibweise auszulagern macht solche Effekte möglich, ohne die Textfarbe zu verändern.
Sie ist eine von drei Langschreibweise-Eigenschaften, die die Kurzschreibweise text-decoration bilden, zusammen mit text-decoration-line (welche Linie: underline, overline, line-through) und text-decoration-style (solid, wavy, dotted, dashed, double). Allein hat text-decoration-color keinen sichtbaren Effekt, wenn keine Dekorationslinie vorhanden ist.
Die Eigenschaft gehört zu den CSS3-Eigenschaften. Jede gültige CSS-Farbe ist verwendbar — die vollständige Liste finden Sie unter HTML-Farben.
| Anfangswert | currentColor |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Nein. |
| Animierbar | Ja. Die Farbe ist animierbar. |
| Version | CSS Text Decoration Module Level 3 |
| DOM-Syntax | object.style.textDecorationColor = "#ccc"; |
Syntax
CSS text-decoration-color Syntax
text-decoration-color: color | initial | inherit;Dabei ist color ein beliebiger CSS-Farbwert. Der Standardwert ist currentColor, d. h. die Dekorationslinie entspricht der Textfarbe des Elements.
Hinweis: Die Verwendung der text-decoration-Kurzschreibweise setzt text-decoration-color auf seinen Anfangswert (currentColor) zurück, sofern keine Farbe in der Kurzschreibweise angegeben ist. Wenn Sie die Farbe separat setzen, deklarieren Sie sie nach einer text-decoration-Kurzschreibweise oder fügen Sie die Farbe direkt in die Kurzschreibweise ein.
Beispiel der text-decoration-color Eigenschaft:
CSS text-decoration-color Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the text</title>
<style>
p {
text-decoration: overline underline;
text-decoration-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Text-decoration-color property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Ergebnis
Beispiel der text-decoration-color Eigenschaft mit den Werten "underline" und "line-through":
CSS text-decoration-color alle Werte Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
text-decoration-color: #666666;
text-decoration-style: wavy;
}
s {
text-decoration-line: line-through;
text-decoration-color: #c91010;
}
</style>
</head>
<body>
<h2>Text-decoration-color property example</h2>
<p>Lorem ipsum is <s>simply dummy</s> text...</p>
</body>
</html>Verwendung von currentColor
Der Anfangswert currentColor hält die Dekorationslinie synchron mit der Textfarbe. Das ist praktisch, wenn sich die Textfarbe bei :hover oder in verschiedenen Themes ändert — der Unterstrich folgt automatisch ohne eine zweite Regel:
a {
color: #8ebf42;
text-decoration-line: underline;
text-decoration-color: currentColor; /* line matches the link color */
}
a:hover {
color: #c91010; /* both text and underline turn red */
}Wichtige Hinweise
- Keine Linie, keine Farbe.
text-decoration-colorist nur sichtbar, wenn eine Dekorationslinie vorhanden ist. Kombinieren Sie es mittext-decoration-line(oder dertext-decoration-Kurzschreibweise) — andernfalls ist nichts zu sehen. - Die Reihenfolge der Kurzschreibweise ist wichtig. Eine spätere
text-decoration-Kurzschreibweise setzt die Farbe aufcurrentColorzurück. Setzen Sie die Farbe zuletzt oder schreiben Sie sie direkt in die Kurzschreibweise:text-decoration: underline #8ebf42;. - Sie wird nicht vererbt. Jedes Element berechnet seinen eigenen Wert, aber da der Standard
currentColorist, entspricht ein untergeordnetes Element in der Regel trotzdem seiner eigenen vererbten Textfarbe. - Sie ist animierbar. Da Farbübergänge sanft sind, können Sie die Unterstrichfarbe bei Hover mit einer
transitionanimieren.
Informationen zur Liniendicke finden Sie unter text-decoration-style und der vollständigen text-decoration-Kurzschreibweise.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| color | Legt die Farbe der Textdekoration fest. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() und currentColor können verwendet werden. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |