下划线画得比文字还宽，这个从 Web 诞生就有的对齐 bug 今天终于被一个 CSS 属性修了

下划线画得比文字还宽，这个从 Web 诞生就有的对齐 bug 今天终于被一个 CSS 属性修了

先看一个你可能从来没注意、但设计师每次看到都想骂人的细节：

给一段文字加下划线，下划线不会只画在文字下面——它会从内容盒的最左边一直延伸到最右边。如果文字前面或后面有一点 padding、或者两个带下划线的元素紧挨着排，下划线的两端就会”多出来”一截，跟旁边的元素视觉上粘成一条线，怎么调都对不齐。

这个问题从 Web 诞生那天就在，二十多年里所有人的解法都是绕：要么给文字包一层 span 用 border-bottom 假装下划线，要么上 ::after 手画一条线，要么干脆放弃下划线改用 background 渐变。没有一个是真正在”修”下划线本身。

Chrome 154 正式带了这个属性的实现：text-decoration-inset。它不改变下划线的粗细、颜色、位置，只做一件事——把装饰线的两端往里收（或往外放）。

语法极其简单：

/* 单值：两端同时内缩 */
text-decoration-inset: 0.5em;

/* 双值：第一个控制起点，第二个控制终点 */
text-decoration-inset: 1em -1em;

正值是内缩（让线变短），负值是外放（让线变长）。用 em 单位描述最合适，因为这样内缩量会跟着字号一起缩放，换字号不会错位。

它和已有的几个下划线属性分工很明确，不冲突：

p {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: red;
  text-underline-offset: 4px;   /* 控制线的垂直偏移 */
  text-decoration-inset: 0.4em; /* 控制线的水平收放 */
}

一个最容易被忽略、但对中文场景极其重要的用法是 auto：

text-decoration-inset: auto;

在中文排版里，下划线（专名号）用来标注人名、地名、书名这类专有名词。如果两个专名紧挨着排，中间又没有空格，两段下划线会连成一条，读者根本分不清是两个词还是一个。auto 会让浏览器自动在相邻装饰之间留出一点间隙——这是手写逻辑很难稳定复现的细节。

注意 auto 和初始值 0 完全不是一回事：0 意味着不收不放，线还是顶着内容盒边缘；auto 是浏览器主动计算一个能让相邻装饰分开的收量。

浏览器支持上，Firefox 早在 146 就已经是完整支持，Chrome 154 这版正式跟上，Safari 目前还在 TP 预览版里。所以真要上生产，稳妥写法是先用 @supports 探测：

@supports (text-decoration-inset: auto) {
  .term { text-decoration-inset: auto; }
}

不支持的环境什么都不做，装饰线退回到默认行为——不塌陷、不出错，属于很干净的渐进增强。

如果你想现在就从项目里清掉那些 border-bottom 假下划线的历史包袱，建议按这个顺序来：先找出所有用 border-bottom 或 ::after 画下划线的地方，逐个换成原生 text-decoration + text-decoration-inset，再用 @supports 包一层兜底。中文站点优先把专名号的场景换成 auto，收益最直观。

数据来源

• Chrome for Developers：Chrome 154 Beta 官方博客（2026年9月2日）text-decoration-inset
• MDN Web Docs：text-decoration-inset CSS property（Firefox 146 完整支持、Safari TP 预览、Chrome 154）
• CSS-Tricks / Briefly：text-decoration-inset is Like Padding for Text Decorations
• Firefox 155 Developer Release Notes（MDN）