text-decoration-thickness

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.

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

Die text-decoration-thickness CSS Eigenschaft legt die Strichstärke der Dekorationslinie fest, die auf Text in einem Element verwendet wird, wie z.B. ein Durchstreichen, Unterstreichen oder Überstreichen.

Probieren Sie es aus

Syntax

css
/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* length */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/* percentage */
text-decoration-thickness: 10%;

/* Global values */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
text-decoration-thickness: unset;

Werte

auto

Der Browser wählt eine geeignete Breite für die Textdekoration.

from-font

Wenn die Schriftdatei Informationen über eine bevorzugte Stärke enthält, verwenden Sie diesen Wert. Falls nicht, verhält es sich so, als ob auto gesetzt wäre, wobei der Browser eine geeignete Stärke wählt.

<length>

Bestimmt die Dicke der Textdekoration mittels einer <length>, wobei die Vorschläge der Schriftdatei oder die Standardeinstellung des Browsers überschrieben werden.

<percentage>

Gibt die Dicke der Textdekoration als <percentage> von 1em in der aktuellen Schriftart an. Ein Prozentsatz wird als relativer Wert vererbt und skaliert daher mit Änderungen in der Schriftart. Der Browser muss mindestens 1 Gerätepixel verwenden. Für eine gegebene Anwendung dieser Eigenschaft bleibt die Dicke im gesamten angewendeten Bereich konstant, auch wenn es Kindelemente mit einer anderen Schriftgröße gibt.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Prozentwertebezieht sich auf die Schriftgröße des Elternelements
Berechneter Wertwie angegeben
Animationstypby computed value type

Formale Syntax

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

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

Beispiele

Unterschiedliche Stärken

HTML

html
<p class="thin">Here's some text with a 1px red underline.</p>
<p class="thick">This one has a 5px red underline.</p>
<p class="shorthand">This uses the equivalent shorthand.</p>

CSS

css
.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}

Ergebnisse

Spezifikationen

Specification
CSS Text Decoration Module Level 4
# text-decoration-width-property

Hinweis: Die Eigenschaft hieß früher text-decoration-width, wurde aber 2019 in text-decoration-thickness umbenannt.

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-thickness
auto
from-font
percentage values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Siehe auch