text-decoration

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die text-decoration Shorthand CSS Eigenschaft legt das Aussehen von dekorativen Linien auf Text fest. Sie ist eine Kurzform für text-decoration-line, text-decoration-color, text-decoration-style und die neuere text-decoration-thickness Eigenschaft.

Probieren Sie es aus

Textdekorationen werden über Nachfahren-Text-Elementen gezeichnet. Das bedeutet, dass wenn ein Element eine Textdekoration angibt, ein Kindelement die Dekoration nicht entfernen kann. Zum Beispiel würde im Markup <p>Dieser Text hat <em>einige hervorgehobene Wörter</em> darin.</p> die Stilregel p { text-decoration: underline; } dazu führen, dass der gesamte Absatz unterstrichen wird. Die Stilregel em { text-decoration: none; } würde keine Veränderung bewirken; der gesamte Absatz bliebe unterstrichen. Allerdings würde die Regel em { text-decoration: overline; } eine zweite Dekoration auf "einige hervorgehobene Wörter" anwenden.

Bestandeigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css

text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;

Die text-decoration Eigenschaft wird als ein oder mehrere durch Leerzeichen getrennte Werte angegeben, die die verschiedenen ausgeschriebenen Textdekorations-Eigenschaften darstellen.

Werte

text-decoration-line: Legt die Art der Dekoration fest, wie underline oder line-through.
text-decoration-color: Legt die Farbe der Dekoration fest.
text-decoration-style: Legt den Stil der Linie fest, die für die Dekoration benutzt wird, wie solid, wavy oder dashed.
text-decoration-thickness: Legt die Dicke der Linie fest, die für die Dekoration benutzt wird.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `text-decoration-color`: `currentcolor` `text-decoration-style`: `solid` `text-decoration-line`: `none`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `text-decoration-line`: wie angegeben `text-decoration-style`: wie angegeben `text-decoration-color`: berechnete Farbe `text-decoration-thickness`: wie angegeben
Animationstyp	wie die jeweiligen Kurzschreibweisen: `text-decoration-color`: Farbe `text-decoration-style`: diskret `text-decoration-line`: diskret `text-decoration-thickness`: by computed value type

Formale Syntax

text-decoration = 
  <'text-decoration-line'>   ||
  <'text-decoration-style'>  ||
  <'text-decoration-color'>  

<text-decoration-line> = 
  none                                                |
  [ underline || overline || line-through || blink ]  

<text-decoration-style> = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy    

<text-decoration-color> = 
  <color>

Beispiele

Demonstration von text-decoration-Werten

css

.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}

html

<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
  This <a class="plain" href="#">link will not be underlined</a>, as links
  generally are by default. Be careful when removing the text decoration on
  anchors since users often depend on the underline to denote hyperlinks.
</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">
  This text has a really thick purple underline in supporting browsers.
</p>
<p class="blink">
  This text might blink for you, depending on the browser you use.
</p>

Ergebnis

Spezifikationen

Specification
CSS Text Decoration Module Level 3 # text-decoration-property
Scalable Vector Graphics (SVG) 2 # TextDecorationProperties

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Die einzelnen Textdekorations-Eigenschaften sind text-decoration-line, text-decoration-color, text-decoration-style und text-decoration-thickness.
Die text-decoration-skip-ink, text-underline-offset und text-underline-position Eigenschaften beeinflussen ebenfalls die Textdekoration, sind jedoch nicht in der Shorthand enthalten.
Die list-style Eigenschaft steuert das Erscheinungsbild von Elementen in HTML <ol> und <ul> Listen.
SVG text-decoration Attribut