---
title: text-decoration
slug: Web/CSS/text-decoration
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Text
  - NeedsMobileBrowserCompatibility
  - Referenz
translation_of: Web/CSS/text-decoration
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <strong><code>text-decoration</code></strong> CSS Eigenschaft wird dazu verwendet, die Textformatierung auf <code>underline</code>, <code>overline</code>, <code>line-through</code> oder <code>blink</code> zu setzen. Unter- und Überstrichdekorationen werden unterhalb des Texts positioniert, Durchstreichungen über dem Text.</p>

<p>Textdekorationen werden auf Unterelemente gezeichnet. Das bedeutet, dass es nicht möglich ist, die Textdekoration, die für ein übergeordnetes Element angegeben wurde, für ein Unterelement zu deaktivieren. Zum Beispiel würde in folgendem Markup <code>&lt;p&gt;Dieser Text hat &lt;em&gt;ein paar hervorgehobene Wörter&lt;/em&gt;.&lt;/p&gt;</code> die Stilregel <code>p { text-decoration: underline; }</code> den gesamten Absatz unterstreichen. Die Stilregel <code>em { text-decoration: none; }</code> würde nichts ändern; der gesamte Absatz wäre immer noch unterstrichen. Jedoch würde die Regel <code>em { text-decoration: overline; }</code> eine zweite Dekoration für "ein paar hervorgehobene Wörter" erscheinen lassen.</p>

<div class="note style-wrap">
<p><strong>Hinweis:</strong> CSS Text Decoration Level 3 hat diese Eigenschaft zu einer Kurzschreibweise für die drei neuen CSS Eigenschaften {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} und {{cssxref("text-decoration-style")}} gemacht. Wie für andere Kurzschreibweiseeigenschaften bedeutet dies, dass sie deren Werte auf deren Standardwerte zurücksetzt, falls diese nicht explizit in der Kurzschreibweiseeigenschaft angegeben sind.</p>
</div>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">/* Schlüsselwortwerte */
text-decoration: none;                 /* Keine Textdekoration */
text-decoration: underline red;        /* Rote Unterstreichung */
text-decoration: underline wavy red;   /* Rote gewellte Unterstreichung */

/* Globale Werte */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
</pre>

<h3 id="Werte">Werte</h3>

<p>Die <code>text-decoration</code> Eigenschaft ist eine Kurzschreibweise und kann die Werte jeder der drei Langschreibweiseeigenschaften annehmen: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} und {{cssxref("text-decoration-style")}}</p>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush: css">h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}
</pre>

<pre class="brush: html" style="display: none;">&lt;h1 class="under"&gt;Unterstrichene Überschrift&lt;/h1&gt;
&lt;p class="line"&gt;Falls Text durchgestrichen werden soll, verwende &lt;code&gt;line-through&lt;/code&gt;.&lt;/p&gt;
&lt;p class="blink"&gt;Dieser Text könnte blinken.&lt;/p&gt;
&lt;h1 class="over"&gt;Und jetzt eine überstrichene Überschrift.&lt;/h1&gt;
&lt;p&gt;Dieser &lt;a class="none" href="textdecoration.html"&gt;Link wird nicht unterstrichen&lt;/a&gt;, wie das bei den meisten Links standardmäßig ist. Vorsicht beim Entfernen der Textdekoration bei Links, da die meisten Benutzer davon ausgehen, dass Hyperlinks unterstrichen sind.&lt;/p&gt;
&lt;p class="underover"&gt;Dieser Text hat beides, eine Unter- und eine Überstreichung.&lt;/p&gt;
</pre>

<p>{{EmbedLiveSample('Beispiele','100%','310')}}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
   <td>{{Spec2('CSS3 Text Decoration')}}</td>
   <td>Hat die Eigenschaft in eine Kurzschreibweiseeigenschaft ungewandelt. Unterstützung für den Wert von {{cssxref('text-decoration-style')}} wurde hinzugefügt.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Keine wesentlichen Änderungen</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{Compat("css.properties.text-decoration")}}</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Das {{cssxref("list-style")}} Attribut steuert die Darstellung von Einträgen in HTML {{HTMLElement("ol")}} und {{HTMLElement("ul")}} Listen.</li>
</ul>