text-decoration-style

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.

Die text-decoration-style CSS Eigenschaft legt den Stil der Linien fest, die durch text-decoration-line spezifiziert werden. Der Stil gilt für alle Linien, die mit text-decoration-line festgelegt werden.

Probieren Sie es aus

Wenn die angegebene Dekoration eine spezifische semantische Bedeutung hat, wie z. B. eine durchgestrichene Linie, die bedeutet, dass ein Text gelöscht wurde, werden Autoren dazu ermutigt, diese Bedeutung mit einem HTML-Tag zu kennzeichnen, wie <del> oder <s>. Da Browser in einigen Fällen das Styling deaktivieren können, verschwindet die semantische Bedeutung in einer solchen Situation nicht.

Wenn mehrere Linienstil-Eigenschaften gleichzeitig gesetzt werden sollen, kann es praktischer sein, die Kurzschreibweise text-decoration zu verwenden.

Syntax

css
/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

Werte

solid

Zeichnet eine einzelne Linie.

double

Zeichnet eine doppelte Linie.

dotted

Zeichnet eine gepunktete Linie.

dashed

Zeichnet eine gestrichelte Linie.

wavy

Zeichnet eine wellenförmige Linie.

-moz-none

Zeichnet keine Linie. Verwenden Sie stattdessen text-decoration-line: none.

Formale Definition

Anfangswertsolid
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Eine wellenförmige Unterstreichung einstellen

Das folgende Beispiel erstellt eine rote, wellenförmige Unterstreichung:

CSS

css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

HTML

html
<p class="wavy">This text has a wavy red line beneath it.</p>

Ergebnisse

Spezifikationen

Specification
CSS Text Decoration Module Level 3
# text-decoration-style-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch