伪元素本身永远无法触发点击事件，因其不是DOM节点，document.querySelector('::after')报错、addEventListener无效；所谓“有时能点”实为伪元素意外拦截宿主事件——默认pointer-events: auto会吃掉点击，须设pointer-events: none透传至宿主。
伪元素本身永远无法触发点击事件——这不是兼容性问题，是浏览器设计决定的。 它不是 DOM 节点，document.querySelector('::after') 会报错，addEventListener('click', ...) 绑定在它身上根本不会执行。所谓“部分移动端无法触发”，其实是误以为伪元素能响应，而真正失效的是宿主元素的点击热区或事件穿透逻辑。
为什么 ::after 看起来“有时能点、有时不能”
根本原因不在伪元素是否“支持点击”，而在它是否意外拦截了宿主元素的点击：
- 伪元素默认
pointer-events: auto（不是none），只要它有尺寸、有定位、且盖在宿主上，就会吃掉鼠标/触摸事件 - 移动端没有
:hover，所以靠::after显示“箭头”或“关闭图标”时，用户本能点那个位置，但若没设pointer-events: none，点击就卡在伪元素层，宿主收不到touchstart - iOS Safari 对
pointer-events: none支持稳定，但若父容器也设了pointer-events: none，子元素再设auto也无效——事件检测自顶向下，父级为none就整棵子树跳过
让宿主元素真正可点的关键三步
目标不是“让伪元素可点”，而是确保点击能落到宿主上：
- 宿主元素（比如
<button class="btn"></button>）必须设position: relative—— 否则::after的position: absolute会找错定位上下文 -
::after必须显式声明pointer-events: none—— 不写就是auto，等于加了一层透明胶布 - 若用伪元素扩大点击区域（如把热区从 24×24px 扩到 44×44px），要配合
top/left偏移和width/height计算，例如：top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px)
移动端点击反馈必须绕开伪元素做
::after 上的 :active 或 :hover 在 iOS 上基本无效，因为 @media (hover: hover) 不匹配触摸设备：
立即学习“前端免费学习笔记（深入）”；
- 点击反馈得靠宿主监听
touchstart，加临时 class（如.is-pressed），再用 CSS 控制样式 - 伪元素的视觉尺寸至少要 ≥ 44×44px（iOS 最小触控热区），否则系统直接忽略触摸，CSS 再怎么调也白搭
- 别用
filter: grayscale()做禁用态，iOS Safari 渲染不稳定；改用opacity: 0.45+color+background-color组合更可靠
最容易被忽略的不是 pointer-events 该设什么值，而是：你画出来的那个“图标”或“边框”，到底有没有真实覆盖在可点击区域上——用 Chrome DevTools 的 “Layers” 面板一眼就能看出它是否参与命中测试（hit testing）。
