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 ⁨Januar 2020⁩.

Die text-decoration-style CSS Eigenschaft legt den Stil der durch text-decoration-line spezifizierten Linien fest. Der Stil wird auf alle Linien angewendet, die mit text-decoration-line gesetzt sind.

Probieren Sie es aus

text-decoration-style: solid;

text-decoration-style: double;

text-decoration-style: dotted;

text-decoration-style: dashed;

text-decoration-style: wavy;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-decoration-line: underline;
}

Wenn die angegebene Dekoration eine bestimmte semantische Bedeutung hat, wie zum Beispiel eine durchgestrichene Linie, die bedeutet, dass ein Text gelöscht wurde, wird empfohlen, diese Bedeutung mit einem HTML-Tag, wie <del> oder <s>, zu kennzeichnen. Da Browser das Styling in einigen Fällen deaktivieren können, würde die semantische Bedeutung in einer solchen Situation nicht verloren gehen.

Wenn Sie mehrere Line-Dekorationseigenschaften gleichzeitig festlegen, kann es praktischer sein, die Kurzschreibeigenschaft 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

Anfangswert	`solid`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

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

Beispiele

Eine wellenförmige Unterstreichung setzen

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

Siehe auch

Wenn Sie mehrere Line-Dekorationseigenschaften gleichzeitig festlegen, kann es praktischer sein, die Kurzschreibeigenschaft text-decoration zu verwenden.
text-decoration-line
text-decoration-color
text-decoration-thickness
text-underline-offset

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden