Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 März 2021.
* Some parts of this feature may have varying levels of support.
Dietext-decoration-thicknessCSS Eigenschaft legt die Strichdicke der Dekorationslinie fest, die auf den Text in einem Element angewendet wird, wie zum Beispiel Durchstreichungen, Unterstreichungen oder Überstreichungen.
Probieren Sie es aus
text-decoration-line: underline;text-decoration-thickness: 3px;text-decoration-line: line-through;text-decoration-thickness: 0.4rem;text-decoration-line: underline overline;text-decoration-thickness: from-font;font-size: 2rem;<section> <p> Confusion kissed me on the cheek, and left a taste so bittersweet </p></section>p { font: 1.5em sans-serif; text-decoration-color: red;}Syntax
/* 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
autoDer Browser wählt eine geeignete Breite für die Textdekoration aus.
from-fontWenn die Schriftdatei Informationen über eine bevorzugte Dicke enthält, wird dieser Wert verwendet. Falls die Schriftdatei diese Informationen nicht enthält, verhält es sich so, als wäre
autogesetzt, wobei der Browser die geeignete Dicke wählt.<length>Gibt die Dicke der Textdekoration als
<length>an, wodurch der Vorschlag der Schriftdatei oder die Standardeinstellung des Browsers überschrieben wird.<percentage>Gibt die Dicke der Textdekoration als
<percentage>von1em in der aktuellen Schriftart an. Ein Prozentwert wird als relativer Wert vererbt und skaliert daher mit Schriftgrößenänderungen. Der Browser muss mindestens 1 Gerätepixel verwenden. Für eine bestimmte Anwendung dieser Eigenschaft ist die Dicke über die gesamte Box konstant, auf die es angewendet wird, auch wenn es untergeordnete Elemente mit unterschiedlicher Schriftgröße gibt.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf::first-letter und::first-line. |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Schriftgröße des Elternelements |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type |
Formale Syntax
text-decoration-thickness =
auto|
from-font|
<length-percentage>
<length-percentage> =
<length>|
<percentage>
Beispiele
Variierende Dicke
HTML
<p>Here's some text with a 1px red underline.</p><p>This one has a 5px red underline.</p><p>This uses the equivalent shorthand.</p>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-thickness-property |
Hinweis:Die Eigenschaft wurde frühertext-decoration-width genannt, aber 2019 zutext-decoration-thickness aktualisiert.