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 ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

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

Probieren Sie es aus

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 untergeordnete Textelemente gezeichnet. Das bedeutet, dass ein Kind-Element die Dekoration nicht entfernen kann, wenn ein Element eine Textdekoration angibt. Beispielsweise bewirkt die Markierung <p>This text has <em>some emphasized words</em> in it.</p> mit der Stilregel p { text-decoration: underline; }, dass der gesamte Absatz unterstrichen wird. Die Stilregel em { text-decoration: none; } würde keine Änderung verursachen; der ganze Absatz bliebe unterstrichen. Die Regel em { text-decoration: overline; } würde jedoch eine zweite Dekoration über den "einigen hervorgehobenen Wörtern" erscheinen lassen.

Bestandteileigenschaften

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 Eigenschaft text-decoration wird als ein oder mehrere durch Leerzeichen getrennte Werte angegeben, die die verschiedenen Langform-Textdekorationseigenschaften darstellen.

Werte

text-decoration-line: Legt die Art der verwendeten Dekoration fest, wie underline oder line-through.
text-decoration-color: Legt die Farbe der Dekoration fest.
text-decoration-style: Legt den Stil der für die Dekoration verwendeten Linie fest, wie solid, wavy oder dashed.
text-decoration-thickness: Legt die Dicke der für die Dekoration verwendeten Linie fest.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `text-decoration-color`: `currentcolor` `text-decoration-style`: `solid` `text-decoration-line`: `none`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `text-decoration-line`: wie angegeben `text-decoration-style`: wie angegeben `text-decoration-color`: berechnete Farbe `text-decoration-thickness`: wie angegeben
Animationstyp	wie die jeweiligen Kurzschreibweisen: `text-decoration-color`: Farbe `text-decoration-style`: diskret `text-decoration-line`: diskret `text-decoration-thickness`: by computed value type

Formale Syntax

text-decoration = 
  <'text-decoration-line'>       ||
  <'text-decoration-thickness'>  ||
  <'text-decoration-style'>      ||
  <'text-decoration-color'>      

<text-decoration-line> = 
  none                                                |
  [ underline || overline || line-through || blink ]  |
  spelling-error                                      |
  grammar-error                                       

<text-decoration-thickness> = 
  auto                 |
  from-font            |
  <length-percentage>  

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

<text-decoration-color> = 
  <color>  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Demonstration der text-decoration Werte

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
Scalable Vector Graphics (SVG) 2 # TextDecorationProperties

Browser-Kompatibilität

Siehe auch

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 aber nicht in der Kurzform enthalten.
Die list-style Eigenschaft steuert das Erscheinungsbild der Elemente in HTML-Listen <ol> und <ul>.
SVG text-decoration Attribut

Help improve MDN

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

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