CSS :after伪元素下划线文本换行时无法铺满宽度的解决方案

这个问题我之前折腾过好一阵子！用伪元素做下划线的时候，确实会碰到文本换行后下划线没法贴合每行文本宽度的坑——毕竟伪元素默认是基于容器宽度渲染的，根本不管文本拆成了几行。这里有几个亲测有效的解决方案，你可以按需选择：

如果你的项目不需要兼容太老的浏览器（支持CSS Text Decoration Level 3及以上），直接用原生属性是最省事的。它会自动让下划线跟着每行文本走，还能轻松加动画：

a {
  /* 初始状态下下划线透明 */
  text-decoration: underline solid transparent;
  /* 调整下划线和文本的间距 */
  text-underline-offset: 4px;
  /* 给颜色变化加过渡动画 */
  transition: text-decoration-color 0.3s ease;
}

a:hover {
  /* hover时显示真实颜色 */
  text-decoration-color: #212121;
}

这种方法的优势是零额外元素，浏览器原生支持，下划线会完美适配每行文本的宽度。唯一的小限制是如果要做下划线粗细的动画，部分浏览器支持度还不够，但日常的颜色过渡完全没问题。

如果需要更灵活的样式（比如渐变下划线、粗细动画、不规则形状的下划线），用背景渐变模拟是最佳选择。关键是要加上box-decoration-break: clone（旧版webkit内核浏览器需要加前缀），让背景在每行文本上独立渲染：

a {
  position: relative;
  text-decoration: none;
  /* 用线性渐变模拟下划线 */
  background-image: linear-gradient(to right, #212121, #212121);
  background-repeat: no-repeat;
  background-position: bottom left;
  /* 初始状态下宽度为0，隐藏下划线 */
  background-size: 0% 2px;
  /* 宽度变化的过渡动画 */
  transition: background-size 0.3s ease;
  /* 避免下划线被字母的下沉部分截断 */
  text-decoration-skip-ink: none;
  /* 核心：让背景在换行时每行都克隆渲染 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

a:hover {
  /* hover时宽度铺满 */
  background-size: 100% 2px;
}

这个方法不仅能解决换行问题，还能实现各种花里胡哨的下划线效果，比如从左到右的渐变展开、彩色渐变下划线等等，兼容性也比伪元素修复方案好很多。

如果你因为某些原因一定要用伪元素实现，那可以通过调整元素的display属性和添加box-decoration-break: clone来修复：

a {
  position: relative;
  text-decoration: none;
  /* 必须设置为inline，让伪元素跟随文本行 */
  display: inline;
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #212121;
  /* 初始状态缩放为0，隐藏下划线 */
  transform: scaleX(0);
  transition: transform 0.3s ease;
  /* 同样需要这个属性让伪元素在换行时每行克隆 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

a:hover::after {
  /* hover时还原缩放 */
  transform: scaleX(1);
}

不过这个方案在一些旧浏览器里可能会有兼容性问题，所以优先推荐前两种方法。

内容的提问来源于stack exchange，提问作者Mihai Constantin