你以为文字下划线只能靠 background 硬撑？Chrome 154 今天用一行属性把它彻底原生化了

写过前端的都踩过这个坑：给链接加了下划线，结果装饰线从头到尾把整行撑满了——字体小一点还好，换成大号字或斜体，underline 直接跑出文字边界，设计师看了直摇头。

这个问题以前只能靠伪元素 + background 渐变绕路。今天 Chrome 154 把 text-decoration-inset 原生化，三行代码的事。

Before：靠 background 模拟

以前写这样一个内缩下划线，需要伪元素配合 background 渐变来模拟：

/* 伪元素 + background 渐变模拟内缩下划线 */
.link {
  position: relative;
  display: inline;
  background: linear-gradient(
    transparent calc(100% - 2px),
    #3b82f6 calc(100% - 2px),
    #3b82f6 100%
  );
  background-repeat: no-repeat;
  background-size: calc(100% - 8px) 2px; /* 手动算缩进 */
  text-decoration: none;
}

问题：换字体、换大小、换斜体，背景渐变永远要对位修正。伪元素还会在无障碍树里多出一个没有语义的可聚焦元素。

After：text-decoration-inset 一行收尾

.link {
  text-decoration: underline;
  text-decoration-color: #3b82f6;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: auto;
  /* Chrome 154+ */
  text-decoration-inset: 8px; /* 两端各缩进 8px */
}

text-decoration-inset 控制装饰线相对文字运行边缘的内缩量，接受：

/* 单值：两端相同 */
text-decoration-inset: 8px;

/* 两值：[start, end] */
text-decoration-inset: 8px 4px;

/* 负值 = 伸出 */
text-decoration-inset: -4px;

/* auto = 浏览器默认值（通常等于 0） */
text-decoration-inset: auto;

Chrome 154 稳定支持，Firefox 158 Nightly 实验中，Safari 暂未实现。text-decoration-skip-ink: auto 控制装饰线穿过 ascenders/descenders 时的断点行为，配合使用效果最佳。

落地路径

1. 保守写法： 只在 Chrome 154+ 启用，用 @supports 渐进增强

.link {
  text-decoration: underline;
  text-decoration-color: currentColor;
}
@supports (text-decoration-inset: 8px) {
  .link { text-decoration-inset: 8px; }
}

2. reveal 动效： 配合 transition 做下划线从窄到宽的揭示动画

.link {
  text-decoration-inset: 100%; /* 先藏起来 */
  transition: text-decoration-inset 0.3s ease;
}
.link:hover { text-decoration-inset: 0; }

3. 多行文字装饰： 对 <del> / <s> 的删除线同样有效，统一间距处理

下一步

把项目里所有用 background 渐变模拟下划线的组件搜出来，换成 text-decoration-inset。Chrome 154+ 可直接上线。

来源：Chrome 154 Release Notes（developer.chrome.com，2026-09-22） + CSS Text Decoration Level 4 Spec