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 setzt das Erscheinungsbild dekorativer Linien auf Text. Es handelt sich um eine Shorthand-Eigenschaft 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 nachfolgende Textelemente hinweg gezeichnet. Das bedeutet, dass wenn ein Element eine Textdekoration spezifiziert, ein Kindelement die Dekoration nicht entfernen kann. Zum Beispiel würde im Markup <p>This text has <em>some emphasized words</em> in it.</p> die Stilregel p { text-decoration: underline; } bewirken, dass der gesamte Absatz unterstrichen wird. Die Stilregel em { text-decoration: none; } würde keine Änderung bewirken; der gesamte Absatz bliebe unterstrichen. Allerdings würde die Regel em { text-decoration: overline; } eine zweite Dekoration auf "some emphasized words" erscheinen lassen.

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Shorthand 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 Langform-Eigenschaften der Textdekoration repräsentieren.

Werte

text-decoration-line: Setzt die Art der verwendeten Dekoration, wie underline oder line-through.
text-decoration-color: Setzt die Farbe der Dekoration.
text-decoration-style: Setzt den Stil der Linie, die für die Dekoration verwendet wird, wie solid, wavy oder dashed.
text-decoration-thickness: Setzt die Dicke der Linie, die für die Dekoration verwendet 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 der Werte von text-decoration

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 individuellen Textdekorationseigenschaften sind text-decoration-line, text-decoration-color, text-decoration-style und text-decoration-thickness.
Die Eigenschaften text-decoration-skip-ink, text-underline-offset und text-underline-position wirken sich ebenfalls auf Textdekorationen aus, 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