伪元素不在DOM中，无法被querySelector等方法选取或绑定事件；只能通过透传、分层响应或视觉扩展方案间接实现交互逻辑。
伪元素根本不在 DOM 树里，所以 addEventListener 必然失败——这不是兼容性问题，是规范限制。
为什么 document.querySelector('::after') 会报错
伪元素（::before、::after）不是真实节点，不参与 DOM 构建，浏览器解析 HTML 时压根不会为它们生成 Element 实例。因此：
-
document.querySelector('::after')语法非法，直接抛SyntaxError: Failed to execute 'querySelector' on 'Document' -
getElementsByClassName、getElementById等 DOM 查询方法完全无法命中伪元素 - DevTools 的 Elements 面板里查不到它们，只在 Styles 或 Computed 中可见
-
event.target永远不可能是伪元素，elementFromPoint()也返回null或底层真实元素
为什么设了 pointer-events: auto 还是点不动
这是最常被误解的一点：pointer-events: auto 是默认值，写不写都一样；它不等于“可被 JS 选中”或“能触发事件回调”，只是让伪元素参与命中测试（hit testing）。但因为伪元素没有 DOM 身份，浏览器根本不会把它放进事件路径里。
- 鼠标悬停显示
cursor: pointer≠ 点击能触发回调 - Chrome 的 “Layers” 面板能看到它是否在层叠上下文中挡住了点击，但 JS 仍“看不见”它
- 试图用 jQuery 写
$('button::after').on('click', ...)—— 选择器无效，执行即静默失败 - 哪怕加了
onclick=""属性，HTML 解析器也会忽略，因为伪元素不支持内联事件属性
真正可用的三种应对方式
你要解决的从来不是“给伪元素绑事件”，而是“如何让视觉上由伪元素构成的区域触发你想要的逻辑”。有且仅有以下路径可行：
立即学习“前端免费学习笔记（深入）”；
-
透传方案（最常用）：给伪元素设
pointer-events: none，确保点击落到宿主元素上，再在宿主的click回调里用e.offsetX/e.offsetY判断是否点在图标/装饰区域内 -
分层响应方案（需严格分离点击区）：宿主设
pointer-events: none，伪元素设pointer-events: auto，监听宿主的click——此时事件实际由伪元素触发，this仍是宿主，但e.target === e.currentTarget成立，可用于关闭按钮等独立交互场景 -
视觉扩展方案（如外边距点击）：用
::before设置负inset+position: absolute扩展可点击区域，同时保持pointer-events: none，让点击穿透到目标元素本身，避免e.target错误指向父容器
移动端和 Safari 的坑特别多
伪元素的层叠行为在不同引擎下差异明显，尤其在旧版 Safari 和安卓 WebView 中：
-
inset: 0在 Safari 16.4 之前不支持，必须拆成top: 0; left: 0; right: 0; bottom: 0 - 伪元素若没配
position: absolute或宿主没设position: relative，定位会错乱，导致“看起来在按钮上，实际点击区域偏移” -
z-index对非定位元素无效，光写z-index: -1没用；要让它显示在文字上又不挡点击，必须组合position: absolute+z-index: 1+pointer-events: none - 真机测试不可省：某些安卓 WebView 里
pointer-events: none不生效，得靠opacity: 0+visibility: hidden双重保险（虽然它们本身仍占位，但部分内核会降级处理）
伪元素的交互本质是视觉与事件系统的错位——你永远不能“操作它”，只能“绕过它”或“利用它的盒模型”。漏掉 pointer-events: none 是高频错误，但更隐蔽的问题往往出在定位上下文缺失或移动端兼容性预估不足。
