伪元素::before和::after根本不能绑定点击事件，因其非DOM节点，无addEventListener接口，document.querySelector('::after')报错，onclick无效；浏览器仅将其视为绘制指令，event.target永远不为伪元素。
伪元素（::before 和 ::after）根本不能绑定点击事件——不是“暂时不支持”，而是浏览器规范层面就不允许。它们不是 DOM 节点，没有 addEventListener 接口，document.querySelector('::after') 直接报错，onclick="" 在 HTML 中完全无效。
伪元素不是 DOM 节点，JS 看不见它
这是所有问题的根源。浏览器渲染时，伪元素只是样式层的“绘制指令”，不生成实际的 DOM 元素节点：
-
getBoundingClientRect()、elementFromPoint()都查不到伪元素 -
event.target永远不会是::after，哪怕你用鼠标精准点在它上面 - DevTools 的 Elements 面板里搜不到它，Console 里也查不到它的引用
pointer-events: auto 不会让伪元素“变可点”
很多人写 ::after { pointer-events: auto; } 后发现还是没反应，是因为：
-
pointer-events: auto是默认值，写了等于没写 - 伪元素默认参与命中测试（hit testing），但只是“拦截”，不是“响应”——它能挡住底层元素，但自己无法成为
event.target - 所谓“拦截”，是指鼠标悬停或点击时，事件路径停在宿主元素上，而非穿透；但这不等于伪元素自身触发了 click
真正有效的做法：把事件挂宿主，用坐标或尺寸判断是否点中伪元素区域
想实现“点关闭图标触发删除”，核心是让宿主元素监听事件，再结合伪元素的布局信息做逻辑分流：
立即学习“前端免费学习笔记（深入）”；
- 确保宿主有
position: relative，伪元素用position: absolute定位，这样e.offsetX / e.offsetY才有意义 - 伪元素设
pointer-events: none（避免遮挡），或设pointer-events: auto+ 宿主pointer-events: none（极少数需视觉/交互分离的场景） - 用
getBoundingClientRect()获取宿主位置，再减去伪元素的left/top偏移，算出伪元素真实像素区域 - 移动端必须保证伪元素热区 ≥ 44×44px，否则 iOS 可能直接忽略触摸
最容易被忽略的三个现实限制
不是理论问题，是上线后真会卡住你的点：
- 安卓 WebView（尤其华为、小米旧版）对
pointer-events: none的穿透支持不稳定，表单控件上可能完全失效 - 父容器若设了
overflow: hidden，伪元素哪怕定位正确，也可能被硬裁掉——根本没渲染出来，更别说交互 - 伪元素画的边框或阴影，若父级有
transform或filter，会创建新层叠上下文，导致z-index失效，视觉上盖住了按钮，但开发者工具却看不出覆盖关系
