如何让span的::before伪元素hover时不触发父元素的hover事件

你给::before设置pointer-events: none的操作完全是反效果的：这个属性的作用是让当前元素不拦截任何鼠标事件，所有操作会直接穿透到下层的父元素<span/>，反而会确保父元素一定能收到hover事件。

方案1：无需修改HTML，使用CSS :has选择器 #

该方案兼容Chrome 105+、Firefox 121+、Safari 15.4+，覆盖当前90%以上的全球用户，仅需要修改hover选择器的逻辑：

#example {
  color: purple;
}

/* 仅当hover的是span本身、不是伪元素时才触发下划线样式 */
#example:hover:not(:has(::before:hover)) {
  cursor: pointer;
  text-decoration: underline;
}

#example::before {
  color: orange;
  content: "<I am ::before>";
  display: inline-block;
  padding: 0 15px;
  cursor: default;
}

核心逻辑是用:has(::before:hover)匹配「鼠标停在伪元素上」的场景，再用:not()排除这种场景，就不会触发父元素的hover样式。

方案2：全浏览器兼容方案，需要微调HTML #

如果需要兼容老旧浏览器，只要给span内的文本加一层嵌套标签，把hover效果绑定到文本标签上即可：
修改后的HTML：

<span id="example"><span class="text">I am sample text</span></span>

修改后的CSS：

#example {
  color: purple;
}

#example::before {
  color: orange;
  content: "<I am ::before>";
  display: inline-block;
  padding: 0 15px;
  cursor: default;
}

/* 只给文本部分加hover效果，伪元素不会触发 */
#example .text:hover {
  cursor: pointer;
  text-decoration: underline;
}

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