::before 扩大按钮热区比 padding 更靠谱，因伪元素不占文档流、不破坏布局，且可通过 position、transform、pointer-events 等精准控制热区；需注意 touch-action、z-index、box-sizing 及移动端兼容性。
伪元素 ::before 扩大按钮热区为什么比加 padding 更靠谱
因为真实点击事件只触发在元素的「渲染区域」，而 padding 会撑开布局、影响相邻元素排版，尤其在紧凑的移动端导航栏里容易挤乱结构；::before 生成的伪元素默认不参与文档流，能纯视觉扩展热区，不影响布局。
常见错误现象：padding: 12px 后按钮变大、父容器高度突增、flex 布局错位；或者用 margin 外扩——根本没用，margin 不响应点击。
- 必须给目标按钮设
position: relative，否则::before无法绝对定位到按钮周围 -
::before需设content: ""，否则不渲染 - 推荐用
transform: scale(1.5)或固定偏移（如top: -10px）控制热区大小，避免用width/height硬撑导致高 DPR 屏幕下模糊 - 别忘了加
pointer-events: auto（某些旧版 Safari 对伪元素默认禁用点击）
移动端真机测试时 ::before 热区失效的三个典型原因
不是写法错，是环境或细节没对齐。iOS Safari 和部分安卓 WebView 对伪元素点击支持有隐性限制。
- 按钮本身没设
cursor: pointer或touch-action: manipulation，系统可能降级为“非可交互”处理 -
::before的z-index被其他层遮挡（比如父容器overflow: hidden截断了伪元素渲染区域） - 用了
opacity: 0或visibility: hidden试图隐藏伪元素——这会让点击失效；应改用background: transparent+border: none
touch-action: manipulation 必须和伪元素热区一起用
这个 CSS 属性告诉浏览器：“这是个按钮，别等 300ms 判断是不是双击”，它直接影响点击延迟和伪元素是否被识别为可点区域。没它，::before 扩出来的区域可能响应极慢甚至无反应。
- 只加在按钮元素上，不要加在父容器（否则可能误禁用滑动）
- 兼容性够用：iOS 9.2+、Android Chrome 36+、Firefox 63+，老版本 fallback 可以靠 JS 绑定
ontouchstart - 如果按钮内含图片或文字，确保子元素没覆盖
touch-action（比如子img设了touch-action: none）
用 box-sizing: border-box 控制热区精度，避免不同设备像素比下偏差
伪元素热区尺寸在 2x/3x 屏幕上会被放大，但浏览器对 border-box 的计算更稳定；不用它的话，width: 44px 在 iPhone 上可能实际只有 22px 物理像素宽，达不到苹果建议的最小点击尺寸（44×44pt）。
- 按钮本身和
::before都要显式声明box-sizing: border-box - 热区尺寸建议按逻辑像素设：比如
width: 44px; height: 44px，而不是22px再靠缩放补 - 慎用
rem单位——viewport 缩放或用户字体设置会干扰热区大小，px最可控
热区不是越大越好，超过按钮视觉边界 20px 后，用户会困惑“我点哪了”；真正难的是在不破坏视觉反馈、不引发误触、不拖慢首屏渲染的前提下，让那 44×44 的物理空间稳稳落在手指落点范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
