伪元素::before和::after非真实dom节点，不参与事件系统，须设pointer-events: none避免遮挡点击；需通过坐标判断或分层透传实现图标区域独立响应。
因为 ::before 和 ::after 根本不是 DOM 节点，浏览器不把它纳入事件捕获路径，addEventListener 绑不上，document.querySelector('::after') 直接报错——这不是兼容性问题，是规范层面的“不存在”。
伪元素在事件系统里压根没有身份
点击事件的目标（e.target）必须是真实 DOM 元素。::before 和 ::after 是渲染层的视觉补丁，由 CSS 引擎生成，不进入 DOM 树，也不参与事件分发。DevTools 里用 elementFromPoint() 查不到它，jQuery('.btn::after') 选择器语法非法，onclick="" 在 HTML 中对伪元素完全无意义。
常见错误现象：
- 写了
cursor: pointer，鼠标悬停有手型，但点击没回调 - Chrome 的 “Layers” 面板显示伪元素参与 hit testing，但宿主没响应
- 加了
pointer-events: auto却毫无变化——因为这是默认值，写不写都一样
pointer-events: none 是穿透关键，不是“让它可点”
::after 默认行为等价于 pointer-events: auto：只要它有尺寸、有定位、又盖在按钮上，就会吃掉点击事件。所谓“修复”，其实是让它别挡事。
正确做法是把 pointer-events: none 明确写在伪元素规则里：
button::after {
content: "×";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
pointer-events: none; /* 必须写在这里 */
}
注意：
- 属性必须作用于伪元素选择器本身，写在父元素上（如
.btn { pointer-events: none }）会直接让整个按钮失能 -
pointer-events: none不影响视觉呈现，只关闭事件捕获 - 移动端尤其要验证：Safari 旧版不支持
inset: 0，用top/left/right/bottom: 0更稳妥
想实现“图标区域独立响应”，得靠坐标判断或分层透传
如果关闭按钮、评分星标这类场景需要“只点图标才触发逻辑”，不能指望伪元素自己 dispatch 事件，而要利用它和宿主的相对位置做分流。
两种可行路径：
- 宿主保持
pointer-events: auto，伪元素设pointer-events: none，然后在 click 回调里用e.offsetX/e.offsetY判断是否落在图标热区内 - 宿主设
pointer-events: none，伪元素设pointer-events: auto，监听仍挂在宿主上——此时this指向宿主，但点击实际由伪元素命中；缺点是宿主不能再响应其他区域的点击
无论哪种，都要确保伪元素有明确尺寸（比如至少 44px × 44px），否则 iOS 会忽略触摸，这不是 CSS 能绕过的限制。
最容易被忽略的是：伪元素是否真的覆盖了你想点的位置。用 Chrome 的 “Rendering > Paint flashing” 点击测试，如果伪元素区域闪烁但逻辑没触发，基本就是它在吃事件，而不是 JS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
