text-decoration

text-decoration: underline;

text-decoration: underline dotted;

text-decoration: underline dotted red;

text-decoration: green wavy underline;

text-decoration: underline overline #ff3028;

<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;
}

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 <p>This text has <em>some emphasized words</em> in it.</p> 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.

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness

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.

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.

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>  

.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;
}

<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

• 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 <ol> und <ul> Listen.
• SVG text-decoration Attribut