伪元素需直接设置 pointer-events: none 才能释放点击事件，因其默认拦截点击；父元素设置无效，因该属性不继承也不穿透；还需排查 overflow 裁剪、安卓 WebView 兼容性及层叠上下文干扰。
直接给伪元素加 pointer-events: none，不是父元素，也不是靠调 z-index。 伪元素（::before 或 ::after）只要渲染出来，默认就吃点击事件——哪怕只是画个 1px 边框、半透明遮罩或阴影，不加这个声明，底下按钮、输入框、链接全点不动。
为什么加在父元素上没用？
浏览器事件捕获是自顶向下走的：pointer-events: none 只对当前元素生效，不“穿透”到子树，也不“跳过”祖先。如果遮挡的是 .card::after，你在 .card 上写 pointer-events: none，::after 依然会拦截点击，因为它的样式没被改。
- 错误写法：.card { pointer-events: none; } → .card::after 还是盖着按钮
- 正确写法：.card::after { pointer-events: none; }
- 验证方法：DevTools 里选中伪元素 → Computed 面板搜 pointer-events，确认值为 none
伪元素被裁剪/看不见，其实是 overflow: hidden 在作怪
很多“伪元素点不了”根本不是事件问题，而是它压根没渲染出来——被父容器硬切掉了。尤其在轮播、卡片、Modal 内部用伪元素画边框或阴影时高频出现。
- 检查父级是否写了 overflow: hidden 或 overflow: clip；临时改成 overflow: visible 就能验证
- 如果必须保留裁剪（比如圆角卡片），就把伪元素逻辑移到父级外层，或者改用 box-shadow 替代
- 特别注意 table 或 td 上的伪元素：Firefox 下可能被背景覆盖，得加 background-clip: padding-box
安卓 WebView 和部分厂商浏览器不认 pointer-events: none
iOS Safari 对该属性支持稳定，但安卓旧版 WebView（尤其是华为、小米系统浏览器）存在已知 bug：设了 none 却仍触发 click，或对 position: sticky 元素完全失效。
- 遇到安卓点击穿透失败，优先排查是否用了 position: sticky —— 换成 position: relative + top 模拟更稳
- 厂商浏览器可能直接忽略 pointer-events: none 对 input[type="file"] 或 select 的穿透，此时只能 JS 控制显隐
- 不要依赖 opacity: 0 或 visibility: hidden：它们仍占位、仍拦截事件，只有 display: none 或 pointer-events: none 才真正释放点击流
最常被忽略的一点：伪元素和父容器共用同一个层叠上下文，z-index: -1 看似能把它压到文字下面，但一旦父容器触发了新层叠上下文（比如加了 transform 或 opacity: 0.99），这个 z-index 就只在局部生效，反而让问题更难定位。所以比起调层级，优先用 pointer-events: none 切断事件流——干净、可控、不干扰布局。
原文链接：
相关文章
