你以为下划线间距只能靠 background 硬撑？今天 CSS 一个属性把它彻底原生化了

下划线贴得太紧、删除线穿过了字母尾部——这种时候以前只能靠写一层 background 再叠一个同色的 border 硬撑，代码写起来绕，效果还不跟边。

Chrome 154 正式给 CSS 补上了这个缺口：text-decoration-inset。

这个属性干的事很简单：控制下划线、上划线、删除线和文字边缘之间的间距。正数往里缩，负数往外扩，可以是长度值，也可以是百分比。

三行核心语法：

/* 控制所有装饰线 */
text-decoration-inset: 4px;

/* 只控下划线，上划线和删除线各自独立 */
text-decoration-inset: auto;
text-underline-offset: 2px;
text-decoration-skip-ink: auto;

/* 两值语法：起点 和 终点 分别控制 */
text-decoration-inset: 2px 6px;

配合 text-decoration-skip-ink: auto（控制装饰线在字符交叉处是否断开），能做出非常干净的高亮下划线效果——不需要额外的 span 或 background 渐变。

对比一下以前的方案：

以前要做「下划线和文字间隔 4px，同时在字符交叉处断开」的效果，CSS 层面基本无解。常见解法是给文字套一层 span 写 background，再用一个伪元素模拟下划线——两个元素配合，还不能处理多行文本。现在 text-decoration-inset + text-decoration-skip-ink: auto 两行搞定。

能用在哪些场景：

• 论文/文档类站点的学术下划线（字母交叉处留白）
• 设计系统里的「文字高亮+下划线」组合，替代 mark 标签加背景色的旧做法
• 上划线做数学公式标注，和文字保持固定间隙

浏览器支持：Chrome 154+、Edge 154+。Firefox 和 Safari 尚未支持，需要用 @supports 做渐进增强：

h1 {
  text-decoration: underline;
}
@supports (text-decoration-inset: 4px) {
  h1 {
    text-decoration-inset: 4px;
    text-decoration-skip-ink: auto;
  }
}

下一步：打开 Chrome 154，打开你项目中带下划线的标题，找一个间距明显太紧的——把 text-decoration-inset 调成 3px~6px，看哪个值最顺眼。然后加一行 @supports 保护旧浏览器。这大概是这轮 CSS 更新里最实用、代码量最少的一个改进。