如何让超链接的加粗下划线在换行时全局生效？

直接用背景渐变替代伪元素实现下划线效果，就能完美适配换行的超链接，不用给每个链接额外套<span>：

a {
  text-decoration: none;
  position: relative;
  /* 核心：用线性渐变实现每行的下划线背景 */
  background-image: linear-gradient(#2EB0C0, #2EB0C0);
  background-position: bottom;
  background-size: 100% 30%;
  background-repeat: repeat-x;
  /* 微调背景与文本的间距，避免贴得太近 */
  padding-bottom: 2px;
}

a:hover {
  color: #c0632e;
  background-image: linear-gradient(#c0632e, #c0632e);
}

问题根源&原理 #

之前用::after伪元素的方法，是把伪元素绝对定位在<a>标签的整个盒子底部。当链接文本换行变成多行时，伪元素只会生成一个覆盖整个<a>宽度的矩形块，没法跟着每行文本调整位置。

换成背景渐变的方式后，浏览器会自动把渐变背景铺在每一行文本的下方，完美适配换行场景，效果和你原来想要的一致。

内容的提问来源于stack exchange，提问作者42piratas