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 Erscheinungsbild dekorativer Linien auf Text fest. Sie ist eine Kurzform für die Eigenschaften text-decoration-line, text-decoration-color, text-decoration-style und die neuere Eigenschaft text-decoration-thickness.

Probieren Sie es aus

text-decoration: underline;

text-decoration: underline dotted;

text-decoration: underline dotted red;

text-decoration: green wavy underline;

text-decoration: underline overline #ff3028;


  
    I'd far rather be
    happy than right
    any day.

p {
  font: 1.5em sans-serif;
}

Textdekorationen werden über nachfolgende Textelemente gezeichnet. Das bedeutet, dass wenn ein Element eine Textdekoration angibt, ein Kindelement die Dekoration nicht entfernen kann. Zum Beispiel würde im Markup

This text has some emphasized words in it.

die Stilregel p { text-decoration: underline; } bewirken, dass der gesamte Absatz unterstrichen ist. Die Stilregel em { text-decoration: none; } würde keine Änderung verursachen; der gesamte Absatz bliebe unterstrichen. Allerdings würde die Regel em { text-decoration: overline; } eine zweite Dekoration auf "some emphasized words" hinzufügen.

Bestandteileigenschaften

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 Eigenschaft text-decoration wird als ein oder mehrere durch Leerzeichen getrennte Werte angegeben, die die verschiedenen Langform-Textdekorationseigenschaften 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 verwendet wird, wie solid, wavy oder dashed.
text-decoration-thickness: Legt die Dicke der Linie fest, 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'>  

 = 
  none                                                |
  [ underline || overline || line-through || blink ]  

 = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy    

 =

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

This text has a line underneath it.
This text has a line over it.
This text has a line going through it.

  This link will not be underlined, 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.

This text has lines above and below it.

  This text has a really thick purple underline in supporting browsers.


  This text might blink for you, depending on the browser you use.

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Die einzelnen 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 beeinflussen ebenfalls die Textdekoration, sind jedoch nicht in der Kurzform enthalten.
Die Eigenschaft list-style steuert das Erscheinungsbild von Elementen in HTML