伪元素（::before、::after）不是 dom 节点，无法绑定事件监听器、无法被查询或作为事件目标；其点击无响应主因是 pointer-events 默认为 auto，修复需设 pointer-events: none 或透传至宿主并结合坐标判断。
伪元素（::before、::after）根本不是 DOM 节点，所以任何尝试给它们加 addEventListener、用 document.querySelector('::after') 获取、或指望 e.target 指向它的做法，都会直接失败——这不是兼容性问题，是规范层面的限制。
为什么addEventListener对::after完全无效
浏览器渲染时，伪元素只参与样式和布局，不生成真实 DOM 节点。DevTools 的 Elements 面板里永远找不到它；document.querySelectorAll('*') 也遍历不到；elementFromPoint() 返回的永远是宿主元素，而非伪元素本身。
-
::after没有nodeType，没有parentNode，无法被 JS “看见” - 写
el.addEventListener('click', ...)时，el必须是 Element 实例，而伪元素连 Element 都不是 - jQuery 的
.on('click')或原生onclick = ...同样无效，底层调用的仍是 DOM API
点击区域在::after上但没反应？先查pointer-events
常见现象：图标用 ::after 绘制，cursor: pointer 正常显示，但点击无响应。真正原因不是 JS 没绑对，而是伪元素自己“吃掉了”事件。
- 默认
pointer-events: auto，只要它有尺寸、有定位、且层叠在宿主上方，就会参与 hit testing - Chrome DevTools 的 Rendering > Paint flashing 可验证：点击时若伪元素区域闪烁但宿主无回调，基本就是它在挡事
- 修复只需一行：
::after { pointer-events: none; }，但必须配合position: absolute和宿主的position: relative，否则定位错乱导致视觉与点击区域不一致
想让“图标区域”触发独立逻辑？用坐标判断或分层透传
极少数场景下，你确实需要区分“点文字”和“点右侧关闭图标”。这时不能依赖伪元素响应，而要靠事件委托 + 位置判断。
- 若图标和文字点击区明显分离（如图标固定在右上角），可在宿主 click 回调中用
e.offsetX/e.offsetY判断落点，再分流处理 - 更稳妥的方案：宿主设
pointer-events: none，::after设pointer-events: auto，然后把监听器挂在宿主上——点击由伪元素触发，但this和e.target仍是宿主元素，JS 上下文不变 - 注意：此方案要求宿主本身无其他交互需求；若需同时响应文字点击，就得额外做
getBoundingClientRect()+ 坐标映射
伪元素的不可监听性是 CSS 渲染模型决定的，绕不开。所谓“巧妙实现”，本质是放弃让它自己响应，转而控制事件穿透路径或利用宿主上下文做二次判定——别在 content 里塞逻辑，要在宿主的事件流里做文章。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
