files/de/web/css/text-decoration-line/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

---
title: text-decoration-line
slug: Web/CSS/text-decoration-line
tags:
  - CSS
  - CSS Eigenschaft
  - Layout
  - Referenz
  - Web
translation_of: Web/CSS/text-decoration-line
---
<div>{{ CSSRef() }}</div>

<h2 id=".C3.9Cbersicht" name=".C3.9Cbersicht">Übersicht</h2>

<p>Die <code>text-decoration-line</code> CSS Eigenschaft repräsentiert die Art der Liniendekoration eines Elements.</p>

<p>Unter- und Überstreichungsdekorationen werden hinter dem Text dargestellt, während Durchstreichungen über dem Text dargestellt werden.</p>

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

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

<pre class="twopartsyntaxbox"><a href="/de/docs/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("text-decoration-line")}}
</pre>

<pre>text-decoration-line: none /* This is the only keyword that cannot be mixed with other */

text-decoration-line: underline
text-decoration-line: overline
text-decoration-line: line-through
text-decoration-line: underline overline
text-decoration-line: overline underline line-through

text-decoration-line: inherit
</pre>

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

<p>Akzeptiert entweder <code>none</code> als Wert oder einen oder mehrere durch Leerzeichen getrennte Werte:</p>

<dl>
 <dt><code>none</code></dt>
 <dd>Erzeugt keine Textdekoration.</dd>
 <dt><code>underline</code></dt>
 <dd>Jede Zeile des Texts wird unterstrichen.</dd>
 <dt><code>overline</code></dt>
 <dd>Über jeder Zeile des Texts wird eine Linie dargestellt.</dd>
 <dt><code>line-through</code></dt>
 <dd>Jede Zeile des Texts wird durchgestrichen.</dd>
 <dt><code>blink {{deprecated_inline}}</code></dt>
 <dd>Der Text blinkt (wechselt zwischen sichtbar und unsichtbar). Dem Standard folgende User Agents können das Blinken ignorieren. Dieser Wert ist  <strong>missbilligt</strong> und es sollten stattdessen <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen">Animationen</a> verwendet werden.</dd>
 <dt><code>-moz-anchor-decoration</code></dt>
 <dd><a href="/de/docs/Web/CSS/CSS_Referenz/Mozilla_CSS_Erweiterungen" title="CSS_Reference/Mozilla_Extensions">Mozilla CSS Erweiterung</a>, nicht geeignet für Webinhalte.</dd>
</dl>

<h2 id="Beispiel" name="Beispiel">Beispiel</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;Hier steht Text mit einer roten Unterkringelung!&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">p {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
}</pre>

<p>{{ EmbedLiveSample('Beispiel') }}</p>

<h2 id="Spezifikation" name="Spezifikation">Spezifikation</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Text-decoration', '#text-decoration-line', 'text-decoration-line') }}</td>
   <td>{{ Spec2('CSS3 Text-decoration') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

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

{{Compat("css.properties.text-decoration-line")}}