伪元素必须显式设pointer-events: none才能解决遮挡问题，因其默认参与事件流且不继承父元素该属性；需单独为::before或::after声明，同时注意尺寸、overflow裁剪、层叠上下文及移动端兼容性。
伪元素本身必须显式设 pointer-events: none
伪元素（::before、::after）默认参与事件流，哪怕只画了个 1px 边框或半透明遮罩，也会拦截点击。你给父元素加 pointer-events: none 没用——它不继承，也不“传染”到伪元素上。
常见错误是只写：.card { pointer-events: none; }
以为这样就能让 .card::before 透传点击，结果按钮还是点不中。
- 正确做法：单独给伪元素声明
pointer-events: none，例如：.card::before { pointer-events: none; } - 如果伪元素要响应点击（比如图标按钮），则必须设
pointer-events: auto，且宿主元素得设pointer-events: none让事件“让渡”过去 - 检查 DevTools 中该伪元素是否真被渲染出来——
overflow: hidden或transform可能把它裁掉或移出命中区域
伪元素热区为 0 的真实原因
即使加了 pointer-events: auto，伪元素也可能点不中，因为它的“可点击区域”可能为 0。
-
::before/::after默认没有尺寸，content: ""不撑开任何空间；必须显式设width、height、display: block或inline-block - 若用
transform: scale()做高清 1px 边框，记得配合box-sizing: border-box和width: 200%; height: 200%，否则缩放后热区仍为 0 - iOS Safari 对无宽高的伪元素完全不派发
touchstart，哪怕写了cursor: pointer也无效
安卓 WebView 下伪元素穿透失效怎么办
华为、小米等旧版 WebView 对 pointer-events: none 在伪元素上的支持不稳定，尤其当伪元素盖着 input[type="file"] 或 select 时。
- 不要依赖纯 CSS 解决：JS 动态移除伪元素（
el.style.content = "none"）比硬扛更可靠 - 避免在伪元素上直接放表单控件；改用真实 DOM 元素 +
z-index叠层控制视觉顺序 - 测试时务必真机跑，模拟器和 Chrome DevTools 的 hit-test 框线会误导判断
动画中伪元素的 pointer-events 切换时机
用 opacity 控制伪元素淡入淡出时，pointer-events 必须同步切换，否则中间帧仍可点。
- 动画开始前立即执行：
el.style.pointerEvents = "none" - 动画结束回调（如
transitionend）里恢复：el.style.pointerEvents = "auto"或删掉内联样式 - 别在
@keyframes里只写0%和100%的pointer-events—— 浏览器可能忽略，优先用 JS 控制
overflow: hidden 裁掉，或者在层叠上下文中被压到看不见的层级——这时候加再多 pointer-events: none 都没意义，得先用 DevTools 的 “Layer Borders” 和 “Hit Test Borders” 两栏一起看。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
