伪元素::before或::after默认无法扩大点击区域，因其不参与浏览器热区计算；必须满足position:relative、content+absolute+inset+pointer-events: auto、无overflow:hidden/transform等三个硬条件才可能生效。
伪元素 ::before 或 ::after 不能直接扩大点击区域，浏览器默认不把它们纳入可点击热区计算；真要靠它“扩热区”，必须显式激活事件捕获、绕过渲染限制、并接受兼容性妥协。
为什么 ::before 默认点不了
移动端点击判定只基于元素自身的盒模型（content + padding + border），伪元素不属于该模型。即使你用 position: absolute 把它画得比按钮还大，iOS Safari 仍会忽略其触摸响应——这不是 bug，是规范行为。常见误判来源包括：父容器 overflow: hidden 裁掉了按钮原生 padding，而伪元素侥幸逃出裁剪范围；或同时改了 display 和伪元素，把 display: inline-block 的生效效果错归给伪元素。
::before 扩热区必须满足的三个硬条件
缺一不可，否则真机上基本失效：
- 目标元素（如
<button>）必须设position: relative，否则伪元素定位失准 -
::before必须有content: ""、position: absolute、inset: -12px（或等效top/left/right/bottom偏移），且显式声明pointer-events: auto - 父容器不能含
overflow: hidden、transform或will-change: transform，否则伪元素会被裁剪或坐标偏移
伪元素方案在 iOS Safari 上的典型失效原因
iOS Safari 对伪元素的触摸支持极保守：
立即学习“前端免费学习笔记（深入）”；
- 若
::before没设背景色、边框或透明度（哪怕background: transparent），某些版本会直接跳过渲染和事件注册 - 子元素（如图标
<i>或<img>）若写了touch-action: none，会拦截冒泡，导致伪元素区域无响应 - 没配
touch-action: manipulation在按钮本身上，伪元素扩展出的区域仍可能触发 300ms 延迟或被识别为滑动
比起伪元素，更推荐先用 padding + min-width + touch-action
伪元素是兜底手段，不是首选解法。真正稳定可靠的组合是：
-
padding: 12px 16px（上下 ≥44px 高度，左右留容错） -
min-width: 44px（尤其对图标按钮或短文字） -
display: inline-block或block（确保padding生效） -
touch-action: manipulation加在按钮自身，非父容器 -
box-sizing: border-box（避免padding撑宽总尺寸）
伪元素唯一合理用途，是在这些基础已调通的前提下，做视觉微调——比如导航栏里按钮不能加 padding（怕撑高），才用 ::before 向外延伸 8px，且必须真机多环境验证。
