text-decoration-style CSS property

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 festgelegte Textdekoration eine bestimmte semantische Bedeutung hat – etwa wenn eine durchgestrichene Linie anzeigt, dass Text gelöscht wurde –, sollten Sie diese Bedeutung durch ein HTML-Tag wie <del> oder <s> kennzeichnen. Da Browser die Darstellung in manchen Fällen deaktivieren können, bleibt die semantische Bedeutung so erhalten.

Wenn Sie mehrere Eigenschaften für die Liniendekoration gleichzeitig festlegen, kann es praktischer sein, stattdessen die Kurzschreibweise text-decoration zu verwenden.

Syntax

/* 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 Wellenlinie.

-moz-none

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

Formale Definition

Formale Syntax

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

Beispiele

Eine wellenförmige Unterstreichung festlegen

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

HTML

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

CSS

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Wenn Sie mehrere Eigenschaften für die Liniendekoration gleichzeitig festlegen, kann es praktischer sein, stattdessen die Kurzschreibweise text-decoration zu verwenden.
• text-decoration-line
• text-decoration-color
• text-decoration-thickness
• text-underline-offset