CSS text-decoration-color-Eigenschaft

Die text-decoration-color-Eigenschaft wird verwendet, um die Farbe der Textdekoration festzulegen. Sie können Farben hier auswählen HTML-Farben.

Diese Farben gelten für Dekorationen wie Überstriche, Unterstriche und gewellte Linien.

Die text-decoration-color-Eigenschaft ist eine der CSS3-Eigenschaften.

Anfangswert	currentColor
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Nein.
Animierbar	Ja. Die Farbe ist animierbar.
Version	CSS Text Decoration Module Level 3
DOM-Syntax	object.style.textDecorationColor = "#ccc";

Syntax

CSS-Syntax für text-decoration-color

css

text-decoration-color: color | initial | inherit;

INFO

Hinweis: Die Verwendung der text-decoration-Shorthand-Eigenschaft setzt text-decoration-color auf currentColor zurück.

Beispiel für die text-decoration-color-Eigenschaft:

CSS-Codebeispiel für text-decoration-color

html

<!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>

Try it Yourself »

Ergebnis

CSS text-decoration-color

Beispiel für die text-decoration-color-Eigenschaft mit den Werten "underline" und "line-through":

CSS-Codebeispiel für alle Werte von text-decoration-color

html

<!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>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
color	Definiert die Farbe der Textdekoration. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() und currentColor verwendet werden.	Testen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Testen »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Praxis

Was kann mit der 'text-decoration-color'-Eigenschaft in CSS festgelegt werden?

Sie ermöglicht das Festlegen der Farbe des Unterstrichs, der mit 'text-decoration' gesetzt wird.Sie passt die Schriftgröße an.Sie ändert den Stil des Textes.Sie ermöglicht das Festlegen der Farbe des durchgestrichenen Textes, der mit 'text-decoration' gesetzt wird.Sie ändert die Hintergrundfarbe der Seite.

CSS text-decoration-color-Eigenschaft ​

Syntax ​

Beispiel für die text-decoration-color-Eigenschaft: ​

Ergebnis ​

Beispiel für die text-decoration-color-Eigenschaft mit den Werten "underline" und "line-through": ​

Werte ​