伪元素遮挡点击事件需直接在其自身设pointer-events: none，而非父元素；默认会拦截click等事件，常见错误是仅设position/fixed/z-index却忽略该属性，且须注意overflow:hidden裁剪、安卓WebView兼容性及层叠上下文影响。
伪元素遮挡点击事件怎么办
直接加 pointer-events: none 就行，但必须加在伪元素本身上，不是父元素。常见错误是只给父容器设了 position: fixed 和 z-index，却忘了伪元素默认会拦截鼠标事件。
- 伪元素（如
::before或::after）只要渲染出来，默认会响应click、touchstart等事件 - 哪怕它只是画个 1px 边框或半透明遮罩，没加
pointer-events: none就会挡住底下按钮、链接、输入框 - 安卓 WebView（尤其华为、小米旧版）对
input[type="file"]和select的穿透支持差，这时光靠 CSS 不够，得配合 JS 移除或临时隐藏伪元素
伪元素被父容器 overflow: hidden 裁掉
这是最常被忽略的“消失”原因——不是没渲染，是被硬生生切掉了。尤其在轮播、卡片列表、Modal 内部用伪元素画边框或阴影时高频出现。
- 检查父级是否写了
overflow: hidden或overflow: clip，临时改成overflow: visible就能验证 - 如果必须保留
overflow: hidden（比如做圆角裁剪），就把伪元素移到父级外层，或者改用box-shadow替代 -
table或td元素上的伪元素边框，在 Firefox 下还可能被背景覆盖，要加background-clip: padding-box
iOS 和安卓在 pointer-events 上行为不一致
iOS Safari 对 pointer-events 的实现更严格也更可靠；安卓 WebView（尤其旧版本）存在已知 bug：设了 none 却仍触发 click，或对 position: sticky 元素完全失效。
- iOS 15+ 支持
pointer-events: auto在iframe内生效，但安卓 Chrome 110 之前不支持 iframe 内透传 - 遇到安卓点击穿透失败，优先排查是否用了
position: sticky—— 换成relative+top模拟往往更稳 - 厂商浏览器（如华为、小米）可能直接忽略
pointer-events: none对表单控件的穿透，此时只能 JS 控制显隐，别硬扛
伪元素边框或阴影被裁剪/模糊
伪元素画的 1px 边框或 box-shadow 外扩阴影，看起来“断了一截”或“发虚”，大概率不是缩放没调对，而是渲染层被父级剪裁或未强制分层。
立即学习“前端免费学习笔记（深入）”；
- 用
transform: scale()做 1px 边框时，伪元素宽高要设为200%，再transform: scale(0.5)，且必须声明box-sizing: border-box -
box-shadow外扩失效？先看第四个参数是不是正数（如4px），再检查父级有没有transform、filter或will-change—— 它们会触发新层叠上下文并裁剪阴影 - 补救方法：给阴影元素加
transform: translateZ(0)强制独立渲染层，或把阴影挪到伪元素上，主体内容和阴影彻底分离
pointer-events、overflow、stacking context 和设备兼容性之间交叉出问题。调试时别只盯着一个样式改，得同时打开 DevTools 的 computed 标签页，看 z-index 是否生效、是否标有 “Stacking Context”，以及 pointer-events 值是否被继承覆盖。 
