伪元素不是DOM节点，无法被querySelector获取或绑定事件；其仅存在于渲染层，JS无法直接操作，所谓“点击”实为宿主元素响应，需通过坐标判断或事件透传实现交互。
伪元素根本不是 DOM 节点，document.querySelector('::after') 会直接报错，addEventListener 绑定在它身上毫无意义——浏览器连它“存在”都不承认。
伪元素没有 DOM 实体，JS 就查不到它
这是最底层的限制：浏览器渲染时，::before 和 ::after 是 CSS 引擎生成的视觉层，不进入 DOM 树。DevTools 的 Elements 面板里搜不到，document.querySelectorAll('*') 也遍历不到，更别提 onclick 或 jQuery 的 .on('click')。
-
document.querySelector('.btn::after')→ 返回null，不是“没匹配到”，是语法无效 -
element.addEventListener('click', handler)只能挂载在真实 DOM 元素上 - 伪元素上的
:hover或:active是 CSS 引擎自己处理的状态切换，和 JS 事件流完全无关
所谓“点击生效”，其实是宿主元素在响应
你看到的“点了 × 图标触发关闭”，真正被点击的永远是它的父元素（比如 .close-btn），伪元素只是视觉参考。是否触发逻辑，取决于：
• 点击坐标是否落在伪元素视觉区域内
• 宿主是否设置了 pointer-events: none 导致事件穿透
• 伪元素有没有意外遮挡宿主（比如 top: -10px; width: calc(100% + 20px)）
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 移动端尤其明显：iOS Safari 不支持伪元素的
:active反馈，但用户仍会点那个位置——必须靠宿主监听touchstart并手动加.is-pressed类 - 用
e.offsetX / e.offsetY判断点击点是否在伪元素“画出来”的区域，比依赖样式更可靠 - 不要写
.btn::after { pointer-events: auto }—— 这等于没写，它默认就是auto，但依然不进事件路径
想让图标区域独立响应？得绕开伪元素本身
唯一接近“伪元素单独响应”的做法，是把宿主设为 pointer-events: none，伪元素设为 pointer-events: auto，再把事件监听器挂在宿主的父级上。但这本质仍是坐标分流，不是真给伪元素加事件。
立即学习“Java免费学习笔记（深入）”；
- 适用场景有限：仅当视觉图标与文字内容明显分离（如关闭按钮、星级评分中的星形轮廓）
- 必须配合盒模型计算：伪元素的
width/height/top/left要精确，否则坐标判断失准 - 父容器若设了
pointer-events: none，子元素再设auto也无效——事件检测自顶向下，父级一关，整棵子树静音
真正容易被忽略的是：伪元素的视觉尺寸是否 ≥ 44×44px（iOS 最小触控热区）。哪怕 CSS 写得再对，系统检测到点击区域太小，直接丢弃触摸事件——这时你调 pointer-events 或改 z-index 都没用。
