CSS-Eigenschaft text-decoration

The text-decoration property sets the decoration of the text.

In CSS3, it is a shorthand for the following properties:

If the value of one of these properties is absent, the default value will automatically be set. The text-decoration-line is required.

In CSS1 specification the text-decoration was not a shorthand and had the following values:

  • none
  • underline
  • overline
  • line-through
  • blink
Anfangswert none currentColor solid
Applies to Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Nein
Animierbar Nein
Version CSS1, CSS3
DOM Syntax object.style.textDecoration = "dashed";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .a {
      text-decoration: overline;
      }
      .b {
      text-decoration: line-through;
      }
      .c {
      text-decoration: underline;
      }
      .d {
      text-decoration: underline overline;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft text-decoration</h2>
    <p class="a">Lorem Ipsum ist ein Blindtext...</p>
    <p class="b">Lorem Ipsum ist ein Blindtext...</p>
    <p class="c">Lorem Ipsum ist ein Blindtext...</p>
    <p class="d">Lorem Ipsum ist ein Blindtext...</p>
  </body>
</html>

Ein weiteres Beispiel, wo die Farbe des Textes angegeben wird:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      text-decoration: underline;
      -webkit-text-decoration-color: #1c87c9; /* Safari */  
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft text-decoration</h2>
    <p>Lorem Ipsum ist ein Blindtext...</p>
  </body>
</html>
Im angegebenen Beispiel wird die Erweiterung -webkit- für Safari verwendet.

Ein Beispiel, wo der Stil des Textes angegeben wird:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      text-decoration-line: underline;
      }
      div.t1 {
      text-decoration-style: dotted;
      }
      div.t2 {
      text-decoration-style: wavy;
      }
      div.t3 {
      text-decoration-style: solid;
      }
      div.t4 {
      text-decoration-line: overline underline;
      text-decoration-style: double;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft text-decoration</h2>
    <div class="t1">Lorem Ipsum ist ein Blindtext...</div>
    <br>
    <div class="t2">Lorem Ipsum ist ein Blindtext...</div>
    <br>
    <div class="t3">Lorem Ipsum ist ein Blindtext...</div>
    <br>
    <div class="t4">Lorem Ipsum ist ein Blindtext...</div>
  </body>
</html>

Werte

Wert Beschreibung
text-decoration-line Specifies the kind of the text decoration.
text-decoration-color Specifies the color of the text decoration.
text-decoration-style Specifies the style of the text decoration.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was sind die möglichen Werte für die CSS-Eigenschaft 'text-decoration'?
Finden Sie das nützlich?