CSS text-underline-offset 属性

CSS text-underline-offset 属性用于定义下划线与文本的垂直偏移量。

语法

text-underline-offset: <length> | <number>

属性值

• <length>：指定下划线与文本的垂直偏移量，可以是绝对单位（如px、em）、相对单位（如%）、视口单位（如vh、vw）等。
• <number>：使用数字作为单位，相当于以em作为单位计算。例如 text-underline-offset: 0.2 等价于 text-underline-offset: 0.2em;

示例

基础示例

u {
  text-decoration: underline;
  text-underline-offset: 5px;
}

该示例会为文本添加下划线，并将下划线与文本垂直偏移5像素。

多重下划线示例

u {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
u.u1 {
  text-decoration-style: double;
  text-underline-offset: 0.3em;
}
u.u2 {
  text-decoration-style: dotted;
  text-underline-offset: 0.1em;
}

该示例包含三个下划线样式：单下划线、双下划线和虚线下划线。每个下划线的偏移量不同。

浏览器兼容性

text-underline-offset 属性的兼容性较差，只有部分浏览器支持。

• Chrome 49+
• Firefox 72+
• Safari 12.1+
• Opera 36+
• Edge 12+

总结

CSS text-underline-offset 属性允许我们指定下划线与文本之间的垂直偏移量。虽然其兼容性不太理想，但在一些特定的场景下，它可以帮助我们实现比较细致的设计效果。