伪元素不是DOM节点，无法通过document.querySelector获取或绑定事件；事件实际由宿主元素响应，需通过坐标计算或elementFromPoint判断点击位置；pointer-events: auto无效，应设为none实现穿透。
伪元素根本不是 DOM 节点，浏览器压根不把它当“元素”看
你写 document.querySelector('.btn::after')，结果一定是 null 或直接报错——这不是选择器写错了，而是语法根本不合法。CSS 规范里明确把 ::before 和 ::after 定义为“渲染层虚拟节点”，它们不进入 DOM 树，不参与 document 对象遍历，document.querySelectorAll('*') 也完全扫不到。
这意味着：addEventListener('click', handler) 没地方挂；onclick="" 属性 HTML 不解析；jQuery 的 .on('click') 会静默失败。所谓“绑定事件”，从第一步就断了。
为什么有时候看起来“能点”，其实是宿主元素在扛锅
你看到的“点了 × 图标关闭弹窗”，触发逻辑永远来自宿主元素（比如 .close-btn），不是那个 ::after。视觉上是伪元素，事件流里它只是个透明画布：
- 点击坐标落在伪元素视觉区域内 → 宿主元素收到
click事件 - 伪元素设置了
pointer-events: auto（默认值）且盖住了宿主 → 宿主收不到事件（常见于移动端失效） - 伪元素设了
pointer-events: none→ 事件穿透，宿主正常响应
真正要判断“是不是点在图标上”，得靠 e.offsetX/e.offsetY、盒模型计算或 elementFromPoint() 查宿主内区域。
立即学习“前端免费学习笔记（深入）”；
pointer-events: auto 写了也白写，别被表象骗了
很多人加了 ::after { pointer-events: auto; }，发现悬停有 cursor: pointer，但点下去毫无反应。原因很直接：auto 是默认值，写了等于没写；而伪元素本身不参与事件捕获路径，pointer-events 在它身上只影响“是否吃掉穿透过来的事件”，不影响“能否成为 event.target”。
想让图标区域独立响应（比如评分星标），唯一可行路径是：
- 宿主设
pointer-events: none - 伪元素设
pointer-events: auto - 事件监听仍挂在宿主上，靠坐标判断分流
注意：父容器若设了 pointer-events: none，子伪元素再设 auto 也无效——事件检测自顶向下，父级拦截整条链就断了。
移动端点击失效？大概率是伪元素在“透明吃点击”
热力图显示用户猛点按钮边缘却无响应，十有八九是伪元素尺寸溢出（比如 top: -10px; right: -10px;）+ 漏写 pointer-events: none。iOS Safari 行为稳定，但安卓 WebView（尤其华为、小米旧版）对 pointer-events 支持不一：有时设了 none 还拦截，有时对 position: sticky 元素完全失效。
排查优先级：
- 用 DevTools 的 Layers 面板确认伪元素是否真覆盖目标区域
- 临时给伪元素加
outline: 2px solid red看实际占位 - 检查父级是否有
overflow: hidden把伪元素裁掉（此时它根本没渲染出来）
最常被忽略的一点：伪元素遮挡是“视觉存在但 DOM 不存在”的双重性问题——你既不能用 JS 直接操作它，又必须用 CSS 精确控制它的事件穿透行为。
