text-decoration-thickness CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2021 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die text-decoration-thickness CSS-Eigenschaft legt die Strichdicke der Dekorationslinie fest, die auf Text in einem Element verwendet wird, wie zum Beispiel bei 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 id="default-example">
<p id="example-element">
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
auto-
Der Browser wählt eine geeignete Breite für die Textdekoration aus.
from-font-
Wenn die Schriftdatei Informationen über eine bevorzugte Dicke enthält, verwenden Sie diesen Wert. Enthält die Schriftdatei diese Informationen nicht, verhalten Sie sich, als wäre
autogesetzt und der Browser wählt eine geeignete Dicke. <length>-
Gibt die Dicke der Textdekoration als
<length>an und überschreibt den Vorschlag der Schriftdatei oder die Standardeinstellung des Browsers. <percentage>-
Gibt die Dicke der Textdekoration als
<percentage>von 1em in der aktuellen Schriftart an. Ein Prozentsatz wird als relativer Wert geerbt und skaliert daher mit Änderungen in der Schriftart. Der Browser muss mindestens 1 Gerät-Pixel verwenden. Für eine bestimmte Anwendung dieser Eigenschaft ist die Dicke über das gesamte angewandte Element konstant, auch wenn es untergeordnete Elemente mit einer anderen 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> |
<line-width>
<length-percentage> =
<length> |
<percentage>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Beispiele
Unterschiedliche Dicken
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
.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
| Spezifikation |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-thickness-property |
Hinweis:
Die Eigenschaft wurde früher text-decoration-width genannt, aber 2019 zu text-decoration-thickness aktualisiert.