::after伪元素非DOM节点，无法绑定事件或被选择器获取；其不参与DOM树，仅属CSS渲染层，事件需通过宿主元素坐标判断实现。
::after 伪元素根本不是 DOM 节点，浏览器不把它当事件目标处理，所以 click、touchstart 等事件永远无法直接绑定或触发在它身上。
document.querySelector('::after') 报错是第一个明确信号
这不是兼容性问题，是规范限制：伪元素只存在于 CSS 渲染层，不进入 DOM 树。以下操作全部无效：
-
document.querySelector('.btn::after')→ 语法错误，选择器非法（不是返回null） -
el.addEventListener('click', handler)中的el不能是伪元素（它连Element实例都不是） -
elementFromPoint()、getEventListeners()、querySelectorAll('*')都查不到它 - DevTools Elements 面板里搜不到，
nodeType和parentNode属性不存在
pointer-events: auto 不会让 ::after “变可点”
很多人加了 cursor: pointer 和 pointer-events: auto 就以为能响应点击，结果没回调——因为 pointer-events: auto 是默认值，写不写都一样；而伪元素默认参与 hit testing，反而会“吃掉”事件，让宿主收不到点击。
- 真正生效的是
pointer-events: none：它让事件穿透到宿主元素 - 若父容器设了
pointer-events: none，子元素再设auto也无效（事件检测自顶向下） - 移动端 iOS Safari 对伪元素的
:active完全不支持，不是 bug，是触摸设备无 hover 上下文
所谓“点击图标”，实际是宿主元素在响应
视觉上你点的是 ::after 画出的 × 或箭头，但 e.target 永远是它的宿主（比如 .close-btn）。想实现“点图标执行关闭，点文字执行编辑”，得靠坐标判断：
立即学习“前端免费学习笔记（深入）”；
- 确保宿主有
position: relative，伪元素用position: absolute精确定位 - 在宿主的
click回调中用e.offsetX/e.offsetY判断落点是否在图标区域内 - 图标视觉尺寸必须 ≥ 44×44px（iOS 最小触控热区），否则系统直接忽略该次触摸
- 别依赖
::after:hover做反馈，移动端无效；改用宿主监听touchstart并加临时 class
最常被忽略的一点：伪元素是否真被渲染出来？overflow: hidden、background-clip、display 类型（如 <img alt="为什么CSS中::after伪元素无法触发点击事件" > 不支持 ::after）都会让它“存在但不可见”，更别说响应事件了。
