伪元素需直接设置 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 切断事件流——干净、可控、不干扰布局。
