::after伪元素不可绑定click事件且不在dom中，因其默认pointer-events: auto会拦截点击；需设pointer-events: none配合position和z-index实现事件穿透。
::after 伪元素本身不能绑定 click 事件，也不在 DOM 树中，任何试图直接给它加监听器或用 document.querySelector('::after') 获取它的做法都会失败。
为什么 ::after 看起来“可点”但实际没反应
常见错误现象：图标用 ::after 画出来，鼠标悬停有 cursor: pointer，点击却毫无反馈。这不是 JS 没绑对，而是事件被它自己吃掉了——::after 默认 pointer-events: auto，只要它有尺寸、有定位、又盖在按钮上，就会参与命中测试（hit testing），把点击拦下来。
Chrome DevTools 的 “Layers” 面板能直观看到它是否参与层叠和事件捕获；开启 “Rendering > Paint flashing” 后点击，如果伪元素区域闪烁但宿主无响应，基本就是它在挡事。
-
::after不是 DOM 节点，addEventListener、jQuery 的.on('click')、甚至document.elementFromPoint()都无法选中它 - 写
pointer-events: none是为了让事件穿透，不是为了“让它可点”——它永远不可点，只能让底层元素可点 - 漏写
position: absolute或宿主没设position: relative，会导致::after定位错乱，视觉上在按钮上，实际盒模型偏移，点击区域错位
pointer-events: none 必须配 position 和 z-index
单独写 pointer-events: none 往往不够。伪元素的层叠行为依赖定位上下文：
- 宿主元素（比如
.btn）必须声明position: relative，否则::after的position: absolute会向上找最近的定位祖先，位置不可控 -
z-index对非定位元素无效，所以光写z-index: -1没用；要让它显示在文字上方又不挡点击，得同时满足：position: absolute+z-index: 1+pointer-events: none - 移动端尤其要注意：Safari 旧版不支持
inset: 0，用top/left/right/bottom: 0更稳妥
需要“伪元素独立响应”的两种真实场景
极少数情况下，你确实希望视觉上的图标区域触发独立逻辑（比如关闭按钮、评分星标），这时不能靠伪元素本身响应，而要靠坐标判断或分层透传：
- 若宿主和伪元素点击区域不重叠（如图标在右上角，文字在左侧），可在事件回调里用
e.offsetX/e.offsetY判断点击位置，再分流处理 - 若必须“只点图标才触发”，推荐方案是：宿主设
pointer-events: none，::after设pointer-events: auto，然后把事件监听器挂在宿主上——点击实际由伪元素触发，但 JS 仍运行在宿主上下文，this指向宿主元素 - 注意：这种方案下，宿主不能有其他交互（比如同时要响应文字点击），否则需额外区分逻辑；且 iOS 要求热区 ≥44×44px，伪元素尺寸必须达标，否则触摸会被系统忽略
最容易被忽略的不是语法，而是覆盖关系本身：你以为伪元素只是装饰，但它可能正严丝合缝地盖住整个按钮的 hit area。验证方式很简单——临时加个 background: rgba(255,0,0,0.1) 到 ::after，看它到底占了多大一块地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
