伪元素不是dom节点，无法被queryselector获取或绑定事件；其仅存在于css渲染层，不进入dom树，浏览器不将其视为事件目标，所有交互必须通过宿主元素实现。
伪元素根本不是 DOM 节点，document.querySelector('::after') 会直接报错，addEventListener 绑定在它身上毫无意义——浏览器连它“存在”都不承认。
伪元素不在 DOM 树里，JS 查不到也遍历不到
浏览器渲染时，::before 和 ::after 是 CSS 引擎生成的视觉层，不进入 DOM 树。DevTools 的 Elements 面板里搜不到，document.querySelectorAll('*') 也遍历不到。所谓“点击 × 图标”，真正被点击的永远是它的宿主元素（比如 .close-btn），伪元素只是视觉参考。
-
document.querySelector('.btn::after')→ 返回null，不是“没匹配到”，是选择器语法无效 -
element.addEventListener('click', handler)只能挂载在真实 DOM 元素上 - 伪元素上的
:hover或:active是 CSS 引擎自己处理的状态切换，和 JS 事件流完全无关
pointer-events: auto 不会让伪元素“变可点”
常见错误：写 ::after { content: "×"; pointer-events: auto; }，鼠标悬停有 cursor: pointer，但点击无回调。原因很直接：pointer-events: auto 是默认值，写不写都一样；但伪元素默认不参与事件捕获路径——它没有 DOM 实体，浏览器根本不会把它列为 event.target。
-
elementFromPoint()查不到伪元素，JS 也压根“看不见”它 -
jQuery('.btn::after').on('click', ...)语法错误，选择器无效 -
onclick=""在 HTML 中不解析伪元素
真正在移动端“失效”的，其实是宿主事件被意外拦截
所谓“iOS Safari 点不了”，不是伪元素不支持，而是它默认 pointer-events: auto，只要它有尺寸、有定位、且盖在宿主上，就会吃掉触摸事件。用户本能点那个图标位置，结果点击卡在伪元素层，宿主收不到 touchstart。
- 必须显式声明
::after { pointer-events: none; }—— 不写就是auto，等于加了一层透明胶布 - 若用伪元素扩大热区（如从 24×24px 扩到 44×44px），要配合
top/left偏移和width/height计算，否则坐标判断失准 - iOS 最小触控热区是 44×44px，伪元素视觉尺寸低于这个值，系统直接忽略触摸
想让图标区域“看起来独立响应”，本质是坐标分流
唯一接近“伪元素单独响应”的做法，是把宿主设为 pointer-events: none，伪元素设为 pointer-events: auto，再把事件监听器挂在宿主的父级上。但这仍是靠 e.offsetX/e.offsetY 判断是否点在伪元素画出的区域内，不是真给伪元素加事件。
- 适用场景有限：仅当视觉图标与文字内容明显分离（如关闭按钮、星级评分中的星形轮廓）
- 父容器若设了
pointer-events: none，子元素再设auto也无效——事件检测自顶向下，父级为none就整棵子树跳过 - 不要依赖
:active做点击反馈，移动端基本无效；得靠宿主监听touchstart加临时 class（如.is-pressed）
最常被忽略的点：伪元素是否真的覆盖了你认为的可点击区域——用 Chrome DevTools 的 “Layers” 面板一眼就能看出它是否参与命中测试（hit testing）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
