伪元素扩展热区必须加 pointer-events: none，否则 ::after 会拦截点击；需配合 position: relative 的宿主元素，并用 inset 统一控制偏移。
伪元素扩展热区必须加 pointer-events: none
不加这句，::after 会拦截点击，真实按钮收不到事件——哪怕你用 background-color 看到它盖住了整个热区，点上去也失焦或穿透。这不是“没生效”，而是它抢了事件又不转发。iOS Safari 尤其敏感，常因此触发下层按钮。
常见错误包括：
- 只写了
content: ""和尺寸，漏掉pointer-events: none - 误设
pointer-events: auto到伪元素上，反而阻断冒泡 - 把
pointer-events: none加在父元素上，导致整块失效
::after 必须配合 position: relative 的宿主元素
伪元素用 absolute 定位时，需要一个最近的、非 static 的定位上下文，否则 top/left/right/bottom 会相对于 viewport 计算，热区飘走。
实操要点：
- 目标按钮（如
<button></button>）必须显式设position: relative - 不要依赖父容器的
relative—— 层级一深就错位，直接写在按钮上最稳 - 如果按钮本身是
inline元素（如<a></a>），记得先加display: inline-block或block，否则width/height不生效
用 inset 比 top/left/right/bottom 更简洁可靠
写 top: -10px; left: -10px; right: -10px; bottom: -10px 看似直观，但容易漏改某一项；而 inset: -10px 是等价简写，语义清晰、不易出错，且所有现代浏览器（含 iOS Safari 15.4+）已支持。
兼容性注意点：
- 若需支持 iOS Safari
- 避免混用
inset和top——CSS 会以最后声明为准，调试时难排查 -
inset不支持百分比负值（如inset: -10%），必须用固定单位（px、rem）
移动端真机测试最容易忽略的三个细节
模拟器跑通不等于真机可用。iOS Safari 的点击穿透、安卓 WebView 的事件冒泡异常、以及 touch-action: manipulation 的生效范围，都得在真机上验证。
必须检查：
- 热区是否覆盖了悬浮菜单、底部导航栏等同层元素——iOS 下极易点击穿透到下层
-
touch-action: manipulation是否加在真实按钮上（不是伪元素），且未与overflow: scroll冲突 - 按钮是否有
user-select: none，防止点击时文字被意外选中干扰体验
伪元素扩热区这事，视觉上完全隐形，但事件流稍有偏差就会彻底失效；别信“看起来没问题”，真机点三遍，覆盖所有交互路径再上线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
