伪元素扩展点击区域必须加pointer-events: none，否则会拦截事件；需配合position: absolute、父元素position: relative及content: ""，才能使热区生效。
伪元素扩展点击区域必须加 pointer-events: none
直接给 button::before 设 top: -10px; left: -10px; right: -10px; bottom: -10px 是没用的——伪元素默认不参与事件捕获，哪怕它盖住了整个按钮，手指点上去还是可能失焦。关键不是“画得大”，而是让浏览器把点击判定逻辑“挪”到这个区域里。
必须显式写 pointer-events: none 在伪元素上，否则它会拦截事件，反而挡住真实元素。真实元素（如 button 或带 role="button" 的 div）要保持 pointer-events: auto（默认值，通常不用写）。
-
content: ""必须存在，否则伪元素不渲染 - 父容器需设
position: relative，否则absolute定位会脱标错位 - 热区扩展值建议统一用
inset（如inset: -10px），比分别写top/left/right/bottom更简洁
label 包裹 input 是最省心的天然热区方案
当 input[type="checkbox"] 或 input[type="radio"] 是 label 的**直接子节点**时，整个 label 渲染区域自动映射为该控件的点击热区——这是 HTML 语义规范强制行为，无需 JS、不依赖 id、无障碍天然支持。
但结构一错就失效：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 中间不能插
span、div等容器，input必须是label的第一层子节点 -
input不能是type="hidden"，也不能被display: none或visibility: hidden隐藏 - 若用
flex布局，加align-items: center，否则input可能被挤出可点击范围 - 别给
label设pointer-events: none、opacity: 0或touch-action: none
移动端真机测试最容易漏掉的三个干扰项
iOS Safari 和部分 Android WebView 对热区传导非常敏感，以下 CSS 会让伪元素或 label 点击静默失效：
-
touch-action: none：禁用浏览器默认点击穿透，label无法把事件“嫁接”到input上 -
user-select: none：某些 Android WebView 会连带抑制click事件冒泡 -
pointer-events: none加在label或其任意父级上，或因z-index错乱被其他层遮挡
验证方法：临时加 outline: 1px solid red 到 label，看是否完整包裹内容；再检查 computed styles 中 pointer-events 和 display 值。
为什么不用 padding 而要用伪元素？
纯 padding 在文字少或图标按钮上容易撑变形，尤其当设计要求“视觉尺寸小但可点区域大”时——比如一个 24×24px 的关闭图标，设计稿不允许加内边距，但 WCAG 要求最小点击区域 44×44px。
伪元素是更干净的解法：
- 不影响盒模型计算，
width/height仍按设计稿来 - 不干扰文本流或
Flex/Grid布局行为 - 可单独控制透明度、过渡动画，甚至加一层轻微阴影提示可点（
box-shadow: 0 0 0 2px rgba(0,0,0,0.1)） - 比改
font-size或用transform: scale()更可靠，后者可能触发重排或模糊
真正难处理的是 iOS Safari 的“点击穿透”：伪元素扩出的热区如果覆盖了下方另一个可点击元素（比如悬浮菜单里的按钮叠在导航栏上），iOS 可能误触发下层元素——这必须靠真机 + 层级审查定位，模拟器测不出来。
