CSS设置的黄色下划线随机未铺满span元素全宽如何解决？

问题原因 #

该异常的核心原因是当前页面内span.yellowhighlight为默认的inline行内元素属性，且文本在展示时发生了换行：绝对定位的::after伪元素会基于行内元素第一行的宽度计算尺寸，因此高亮仅覆盖到第一行末尾的字母A处。
另外还有两种可能的次要诱因：

• 当前页面存在优先级更高的CSS规则，覆盖了yellowhighlight的尺寸、位置属性
• 标题父级元素被设置了overflow: hidden等溢出截断规则，误将后半段高亮裁剪了

修复方案 #

方案1：适配单行文本场景（原有逻辑改动最小）

给span.yellowhighlight新增display: inline-block属性，让整个span作为完整行盒计算尺寸，伪元素就会完整覆盖整个文本宽度：

span.yellowhighlight {
  position: relative;
  z-index: 0;
  /* 新增如下规则 */
  display: inline-block;
}

如果调整后高亮位置偏移，微调原有top属性的数值即可适配。

方案2：适配多行文本场景

如果后续需要支持多行高亮，建议替换为背景渐变实现方案，无需伪元素即可适配任意行数的高亮需求：

span.yellowhighlight {
  /* 移除原有相对定位、z-index属性，替换为如下规则 */
  background: linear-gradient(transparent 60%, #fffa50 60%);
  padding: 0 0.15em;
  border-radius: 2em;
}

额外排查步骤

如果以上修改不生效，可以打开浏览器开发者工具的元素检查面板：

1. 查看yellowhighlight元素是否被其他高优先级CSS规则覆盖了属性
2. 检查h1标题的所有父级元素是否设置了overflow: hidden、text-overflow: ellipsis等截断规则，如有则删除或调整优先级即可。

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