text-underline-offset

text-underline-offset CSS 属性设置下划线文本装饰线（使用 text-decoration 应用）与其原始位置的偏移距离。

试一试

text-underline-offset 不是 text-decoration 简写的一部分。虽然元素可以有多个 text-decoration 行，但 text-underline-offset 仅影响下划线，而 **不** 影响其他可能的线装饰选项，如 overline 或 line-through。

语法

css
/* Single keyword */
text-underline-offset: auto;

/* length */
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/* percentage */
text-underline-offset: 20%;

/* Global values */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

text-underline-offset 属性指定为以下列表中的单个值。

值

auto

浏览器选择下划线的适当偏移量。

<长度>

将下划线的偏移量指定为 <length>，覆盖字体文件建议和浏览器默认值。建议使用 em 单位，以便偏移量随字体大小进行缩放。

<百分比>

将下划线的偏移量指定为 <percentage>，它占元素字体中 1 em 的百分比。百分比继承为相对值，因此随着字体更改而缩放。对于此属性的给定应用，偏移量在整个应用下划线的框中都是恒定的，即使存在具有不同字体大小或垂直对齐的子元素也是如此。

正式定义

初始值auto
应用于所有元素。它也应用于 ::first-letter 和 ::first-line。
继承是
百分比参考元素本身的字体大小
计算值如指定
动画类型按计算值类型

正式语法

text-underline-offset = 
  auto                 |
  <length-percentage>  

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

示例

text-underline-offset 演示

html
<p class="oneline">Here's some text with an offset wavy red underline!</p>
<br />
<p class="twolines">
  This text has lines both above and below it. Only the bottom one is offset.
</p>
css
p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}

规范

规范
CSS 文本装饰模块级别 4
# underline-offset

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

参见