伪元素扩展热区必须设 pointer-events: none 且按钮需 position: relative，负值定位比 calc 更可靠，iOS Safari 易出现点击穿透，须用 z-index 隔离层级并真机测试。
伪元素扩展热区必须设 pointer-events: none
伪元素默认不捕获事件，哪怕它盖住了按钮，点击仍可能失焦或穿透。关键不是让它“能点”，而是让它“不抢点”——把事件透传回真实元素。pointer-events: none 是强制开关，缺了它，::before 或 ::after 扩出来的区域根本不会触发点击。
常见错误包括：
- 漏写
pointer-events: none，结果热区无效，调试时用background-color可视化后发现点不中 - 误加
pointer-events: auto到伪元素上，反而阻断了父元素事件冒泡 - 在 iOS Safari 中，伪元素覆盖了下方悬浮菜单按钮，导致点击穿透到下层元素（尤其在
position: fixed场景里）
父容器必须有 position: relative
伪元素用 position: absolute 定位时，会相对于最近的已定位祖先元素找参考系。如果按钮本身没设 position: relative，它就往上一直找，可能落到 body 或某个滚动容器上，造成热区错位甚至飞出视口。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 直接在按钮选择器里加
position: relative，别依赖父级布局容器代劳 - 避免和
transform同时使用——某些旧版 Safari 下，transform会创建新的层叠上下文，干扰伪元素定位基准 - 如果按钮是
display: inline（比如未显式设display的<a>），先补display: inline-block，否则position: relative不生效
top/left/right/bottom 负值比 width/height 更安全
用 top: -10px; left: -10px; right: -10px; bottom: -10px 比写 width: calc(100% + 20px); height: calc(100% + 20px) 更可靠。前者自动适配内容尺寸变化（比如文字换行、图标缩放），后者在 flex 容器里容易因百分比解析异常而失效。
注意边界场景：
- 负值扩得太大会让热区超出父容器，被
overflow: hidden截断——检查父级是否意外设置了该属性 - 在
min-width或min-height已设死的按钮上，负向扩展依然有效，因为伪元素不参与盒模型计算 - 不要用
transform: scale()模拟扩大——它会缩放整个渲染层，可能引起字体模糊或点击坐标偏移
iOS Safari 的点击穿透问题最容易被忽略
伪元素热区在 iOS 上可能“透过去”触发底层元素，尤其当两个可点击元素存在视觉重叠（如弹窗按钮叠在导航栏上）。这不是 bug，而是 Safari 对 pointer events 的合成策略：它把伪元素区域视为“透明代理”，但若底层元素也在同一层叠上下文中，事件可能被双重分发。
缓解方式只有两个：
- 确保伪元素热区不覆盖其他可点击元素——用
z-index显式隔离层级，比如给弹窗加z-index: 1000，导航栏设为z-index: 999 - 在可能穿透的底层元素上加
pointer-events: none（仅限临时交互态），或改用touch-action: none配合 JS 拦截
真机测试不能跳过，模拟器无法复现这种合成层行为。
