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.

Die text-decoration shorthand-CSS-Eigenschaft legt das Erscheinungsbild dekorativer Linien auf Text fest. Sie ist eine Kurzform für text-decoration-line, text-decoration-color, text-decoration-style und die neuere text-decoration-thickness Eigenschaft.

Probieren Sie es aus

Textdekorationen werden über vorgelagerte Textelemente gezeichnet. Das bedeutet, wenn ein Element eine Textdekoration angibt, kann ein Kindelement die Dekoration nicht entfernen. Zum Beispiel im Markup <p>This text has <em>some emphasized words</em> in it.</p> würde die Stilregel p { text-decoration: underline; } dazu führen, dass der gesamte Absatz unterstrichen wird. Die Stilregel em { text-decoration: none; } würde keine Veränderung bewirken; der gesamte Absatz wäre weiterhin unterstrichen. Die Regel em { text-decoration: overline; } würde jedoch eine zweite Dekoration auf "some emphasized words" erscheinen lassen.

Bestimmende Eigenschaften

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 text-decoration-Eigenschaft wird als ein oder mehrere durch Leerzeichen getrennte Werte angegeben, die die verschiedenen umfassenden text-decoration-Eigenschaften repräsentieren.

Werte

text-decoration-line

Legt die Art der Dekoration fest, wie z.B. 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 z.B. solid, wavy oder dashed.

text-decoration-thickness

Legt die Dicke der Linie fest, die für die Dekoration verwendet wird.

Formale Definition

Initialer Wertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

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>

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch