View in EnglishAlways switch to English

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 2021年3月.

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

CSS 属性text-decoration-thickness 用于设置元素中文本所使用的装饰线（如 line-through、underline 或 overline）的笔触粗细。

尝试一下

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>困惑轻吻我的脸颊，留下苦涩中带着甜蜜的滋味</p></section>

p {  font: 1.5em sans-serif;  text-decoration-color: red;}

语法

css

/* 单关键字 */text-decoration-thickness: auto;text-decoration-thickness: from-font;/* 长度 */text-decoration-thickness: 0.1em;text-decoration-thickness: 3px;/* 百分比 */text-decoration-thickness: 10%;/* 全局值 */text-decoration-thickness: inherit;text-decoration-thickness: initial;text-decoration-thickness: revert;text-decoration-thickness: revert-layer;text-decoration-thickness: unset;

值

auto: 由浏览器为文本装饰线选择合适的粗细。
from-font: 如果字体文件中包含了首选的粗细值，则使用字体文件的粗细值。如果字体文件中没有包含首选的粗细值，则效果和设置为auto 一样，由浏览器选择合适的粗细值。
<length>: 将文本装饰线的粗细设置为一个<length> 类型的值，覆盖掉字体文件建议的值或浏览器默认的值。
<percentage>: 指定文本装饰线的粗细，其值为当前字体中1em 的<percentage>。百分比值作为相对值继承，因此会随字体变化而缩放。浏览器必须使用至少 1 个设备像素。对于该属性的特定应用场景，其粗细在整个应用的盒子内保持恒定，即使盒子内存在字号不同的子元素亦然。

形式定义

初始值	`auto`
适用元素	所有元素. It also applies to`::first-letter` and`::first-line`.
是否是继承属性	否
Percentages	refer to the font size of the element itself
计算值	as specified
动画类型	按计算值的类型

形式语法

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

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

示例

粗细变化

HTML

html

<p>这里的文字具有 1px 的红色下划线。</p><p>这里的文字具有 5px 的红色下划线。</p><p>这里使用了等价的简写形式。</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;}