移动端CSS链接下划线仅显示于文字下方的实现求助

看起来你遇到的问题是因为在移动端，<a>标签可能默认（或被其他CSS规则影响）变成了块级元素（display: block），导致你用:after伪元素创建的下划线撑满了整个容器宽度，而非仅在文字下方。这里有两种可靠的解决方案，你可以根据需求选择：

方案1：单行文字场景（下划线严格匹配文字宽度） #

这个方案适合文字不会换行的场景，通过调整元素定位与显示方式，让下划线完全贴合文字宽度：

.underline-link {
  position: relative;
  /* 让元素宽度自适应文字，而非撑满父容器 */
  display: inline-block;
  /* 保留你的默认文字颜色，此处示例用黑色 */
  color: #000;
}

.underline-link:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  /* 宽度相对于父元素（即文字的实际宽度） */
  width: 100%;
  height: 1px;
  background-color: #0982ae;
}

.underline-link:hover {
  color: #0982ae;
}

核心逻辑：

• 给.underline-link设置position: relative，让伪元素的绝对定位以它为基准
• 用display: inline-block让元素宽度仅包裹文字，而非占满整行
• 伪元素的width: 100%此时会匹配文字宽度，而非容器宽度

方案2：多行文字场景（每一行文字下方都有下划线） #

如果链接文字在移动端可能换行，方案1只会在整个文字块底部加一条下划线，这时可以用背景渐变实现逐行下划线：

.underline-link {
  /* 用线性渐变模拟下划线，transparent为透明区域，#0982ae为下划线颜色 */
  background-image: linear-gradient(to bottom, transparent 95%, #0982ae 95%);
  background-repeat: repeat-x;
  background-size: 100% 1px;
  background-position: 0 100%;
  /* 可选：调整文字与下划线的间距 */
  padding-bottom: 2px;
}

.underline-link:hover {
  color: #0982ae;
  /* hover时同步改变下划线颜色（可选） */
  background-image: linear-gradient(to bottom, transparent 95%, #0982ae 95%);
}

这个方法无需伪元素，直接通过背景渐变实现，每一行文字下方都会有对应的下划线，且完全贴合文字范围。

你可以根据自身文字显示需求选择对应方案，测试后应该就能解决移动端下划线覆盖整个元素的问题了。

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