Firefox中<a>标签:active与::before组合失效问题求助

架构老林

2026-5-19

解决Firefox 58.02中带::before伪元素的标签:active失效问题

我之前在适配旧版Firefox时也踩过这个伪元素和:active的坑，结合你描述的三种情况，核心原因是Firefox 58对伪元素的鼠标事件处理逻辑和其他浏览器（甚至新版Firefox）不一致，导致点击伪元素区域时，父标签的:active状态无法正常触发或维护。

给::before伪元素添加pointer-events: none;，这样点击伪元素区域时，事件会直接穿透到下方的标签，确保:active状态正常触发：

a::before {
  content: "ABC";
  /* 你的其他样式 */
  pointer-events: none; /* 关键属性 */
}

这个方案适用于不需要伪元素单独响应鼠标事件的场景，能完全解决点击伪元素时父元素:active失效的问题。

如果你的伪元素需要响应鼠标事件（比如有自己的交互样式），那可以给伪元素也添加:active的样式规则，确保和父元素状态同步：

a:active {
  background: red;
  transform: translateY(2px);
}
/* 同步伪元素的:active状态 */
a:active::before {
  /* 伪元素的激活样式，比如颜色变化 */
  color: #fff;
}

这样点击伪元素时，即使事件被伪元素接收，也能通过这个规则让整体样式符合预期，同时避免状态卡住。

如果遇到像_3那样持续处于:active的情况，除了上述方案，还可以检查：

document.querySelector('.link-3').addEventListener('mouseup', function(e) {
  this.blur();
});

强制让元素失去焦点，从而重置:active状态。

在Firefox 58.02中测试上述方案后，点击"ABC"区域时，_2的:active会正常触发，_3也不会持续处于激活状态，完全符合预期效果。

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