W3docs
de
Anmelden

CSS text-decoration-line Eigenschaft

Die CSS-Eigenschaft text-decoration-line legt die Art der Linie für Textdekorationen fest. Werte, Syntax und Beispiele.

Die Eigenschaft text-decoration-line legt die Art der Linie fest, die für Textdekorationen verwendet wird — eine underline, eine overline, eine line-through oder eine Kombination davon.

Sie ist eine der vier Langhand-Eigenschaften, aus denen die Kurzschreibweise text-decoration besteht; die anderen sind text-decoration-color, text-decoration-style und text-decoration-thickness. Verwende text-decoration-line allein, wenn du nur ändern möchtest, welche Linien erscheinen, und Farbe, Stil und Stärke unverändert lassen willst.

Diese Seite behandelt die akzeptierten Werte der Eigenschaft, das Kombinieren mehrerer Linien gleichzeitig, die Beziehung zur Kurzschreibweise sowie einige praktische Besonderheiten.

Info

Die Eigenschaft text-decoration-line wird von allen modernen Browsern ohne Vendor-Präfixe vollständig unterstützt. Sie gehört zu den CSS3-Eigenschaften.

Warum text-decoration-line verwenden

Ein häufiger Grund für die Langhand-Eigenschaft ist, eine einzelne Linie hinzuzufügen oder zu entfernen, ohne den Rest der Dekoration zu beeinflussen. Links sind beispielsweise standardmäßig unterstrichen; text-decoration-line: none entfernt diese Unterstreichung, lässt aber die Möglichkeit offen, später über die Kurzschreibweise eine benutzerdefinierte Unterstreichungsfarbe festzulegen. Die Eigenschaft akzeptiert außerdem mehrere Keywords, sodass du in einer einzigen Deklaration sowohl eine Unter- als auch eine Überstreichung auf denselben Text anwenden kannst.

Anfangswertnone
Gilt fürAlle Elemente. Gilt auch für ::first-letter und ::first-line.
VererbtNein.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.textDecorationLine = "overline underline";

Syntax

CSS text-decoration-line Syntax

text-decoration-line: none | [ underline || overline || line-through ] | initial | inherit;

Das Schlüsselwort none steht allein, aber underline, overline und line-through können in einer einzigen Deklaration kombiniert werden, durch Leerzeichen getrennt, wobei die Reihenfolge keine Rolle spielt:

/* a single line */
text-decoration-line: underline;

/* two lines at once */
text-decoration-line: underline overline;

/* all three */
text-decoration-line: underline overline line-through;

Beispiel der text-decoration-line-Eigenschaft:

CSS text-decoration-line Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration-line: overline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS text-decoration-line Eigenschaft

Beispiel der text-decoration-line-Eigenschaft mit dem Wert "underline":

CSS text-decoration-line mit underline-Wert Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration-line: underline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Probier es selbst »

Beispiel der text-decoration-line-Eigenschaft mit dem Wert "line-through":

CSS text-decoration-line mit line-through-Wert Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration-line: line-through;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Probier es selbst »

Beispiel der text-decoration-line-Eigenschaft mit allen Werten:

CSS text-decoration-line alle Werte Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 20px 0;
      }
      div.t1 {
        text-decoration-line: none;
      }
      div.t2 {
        text-decoration-line: underline;
      }
      div.t3 {
        text-decoration-line: line-through;
      }
      div.t4 {
        text-decoration-line: overline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <div class="t1">
      Lorem Ipsum is simply dummy text...
    </div>
    <div class="t2">
      Lorem Ipsum is simply dummy text...
    </div>
    <div class="t3">
      Lorem Ipsum is simply dummy text...
    </div>
    <div class="t4">
      Lorem Ipsum is simply dummy text...
    </div>
  </body>
</html>
Probier es selbst »

text-decoration-line mit der Kurzschreibweise kombinieren

Da text-decoration-line nur die Linien steuert, kombinierst du sie in der Regel mit den anderen Langhand-Eigenschaften — oder verwendest einfach die Kurzschreibweise text-decoration, die alle auf einmal setzt. Diese beiden Regeln erzeugen dasselbe Ergebnis:

/* longhands */
p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

/* shorthand equivalent */
p {
  text-decoration: underline red wavy;
}

Die Langhand-Eigenschaft lohnt sich, wenn du nur einen Teil der Dekoration überschreiben möchtest, ohne die gesamte Deklaration neu zu schreiben — beispielsweise beim :hover nur den Linientyp ändern, während eine geerbte Farbe und ein geerbter Stil beibehalten werden.

Hinweis zur Barrierefreiheit

text-decoration-line: line-through ist rein visuell: Hilfstechnologien geben nicht bekannt, dass der Text durchgestrichen ist. Um Screenreader-Nutzern zu vermitteln, dass ein Inhalt "entfernt" oder "gelöscht" wurde, sollte das semantische Element <del> oder <s> verwendet werden, anstatt sich ausschließlich auf CSS zu verlassen.

Werte

WertBeschreibungAusprobieren
noneEs wird keine Linie festgelegt.Ausprobieren »
underlineLegt eine Linie unter dem Text fest.Ausprobieren »
overlineLegt eine Linie über dem Text fest.Ausprobieren »
line-throughLegt eine Linie durch den Text fest.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom Elternelement.

Die Eigenschaft text-decoration-line unterstützte früher einen blink-Wert, der den Text aufleuchten und ausblenden ließ. Dieser ist nun veraltet und wird von den meisten Browsern ignoriert — verwende ihn daher nicht in neuem Code.

Verwandte Eigenschaften

Übung

Übung
Welche dieser Werte sind gültige Werte für die Eigenschaft 'text-decoration-line' in CSS?
Welche dieser Werte sind gültige Werte für die Eigenschaft 'text-decoration-line' in CSS?
Was this page helpful?