CSS text-decoration-thickness-Eigenschaft

Definition und Verwendung

Die Eigenschaft text-decoration-thickness legt die Stärke der Dekorationslinie fest.

Weitere Informationen siehe:

CSS-Referenzhandbuch:text-decoration-Eigenschaft

CSS-Tutorial:CSS Text

Beispiel

Legen Sie verschiedene Dekorationsstärken für die <h1>-, <h2>-, <h3>- und <h4>-Elemente fest:

h1 {
  text-decoration: underline;
  text-decoration-thickness: auto;
}
h2 {
  text-decoration: underline;
  text-decoration-thickness: 5px;
}
h3 {
  text-decoration: underline;
  text-decoration-thickness: 50%;
}
/* Verwenden Sie die Abkürzungseigenschaft */
h4 {
  text-decoration: underline solid red 50%;
}

Versuchen Sie es selbst

CSS-Syntax

text-decoration-thickness: auto|from-font|length/percentage|initial|inherit;

Eigenschaftswert

Wert Beschreibung
auto Der Browser wählt die Stärke der Dekorationslinie.
from-font Wenn die Schriftartdatei Informationen über bevorzugte Stärke enthält, verwenden Sie diesen Wert. Wenn nicht, wird "auto" dargestellt.
length/percentage Legt die Stärke als Längenwert oder Prozentsatz fest.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: auto
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS4
JavaScript-Syntax: object.style.textDecorationThickness="5px"

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
89.0 89.0 70.0 12.1 75.0