::before 伪元素扩大点击区域需设 content: ""、display 及尺寸，z-index 设为 -1 避免遮挡，注意 pointer-events、高倍屏适配及 IE/Safari 兼容性。
伪元素扩大点击区域时，::before 为什么没反应？
因为默认情况下 ::before 是 inline 元素，不占空间、无尺寸、无法响应事件。即使设置了 content: ""，也得显式声明 display 和尺寸才能参与布局与交互。
- 必须设置
content: ""，否则伪元素不渲染 - 推荐用
display: block或display: absolute（配合定位） - 需设定
width和height，或用inset/top/right/bottom/left拉伸 - 若父容器是
position: relative，伪元素设position: absolute才能脱离文档流又精准覆盖
::before 扩大点击区但不遮挡原内容的 zIndex 控制
伪元素默认渲染在原元素之上，容易盖住文字、图标或子控件，导致点击错位或视觉异常。关键不是“要不要加 z-index”，而是加在哪一层、值设多少。
- 给原元素设
position: relative和z-index: 1（哪怕只是 1） - 给
::before设z-index: -1，它就乖乖躺到原盒底层，不影响视觉但保留点击能力 - 避免对
::before设正向z-index，否则可能意外遮挡 sibling 元素 - 注意：父容器若有
overflow: hidden，扩出去的部分会被裁剪，得同步处理
移动端点击失效？检查 pointer-events 和设备像素比
伪元素扩大后，在 iOS Safari 或部分安卓 WebView 中点不中，大概率不是 CSS 写错了，而是交互层被拦截或尺寸计算失真。
- 确保
::before有pointer-events: auto（默认就是，但显式写上更稳） - 如果用了
transform: scale()模拟放大，会破坏点击热区映射，改用width/height/inset - 小尺寸扩展（如只加 4px）在 2x/3x 屏幕下可能不足 40px，iOS 要求最小触控目标为 44×44pt，建议扩展至少
8px起 - 避免在
:active状态里改伪元素尺寸，会造成点击反馈抖动
兼容性边界：IE11 和旧版 Safari 的 inset 替代方案
inset: -8px 写法简洁，但 IE11 不支持，Safari ≤14.1 对 inset 的解析也不稳定。真要保老版本，得退回传统四边定位。
- 用
top: -8px; right: -8px; bottom: -8px; left: -8px替代inset: -8px - IE11 不支持
position: absolute在 flex 容器子项上的正确计算，此时需在外层加 wrapper 并设position: relative - 伪元素无法继承父级
transform，所以别指望靠父级缩放来间接扩大点击区 - 所有尺寸建议用 px，避免 rem/vw 在不同根字体或视口缩放下失准
最麻烦的不是怎么写，而是扩完之后忘了测 focus outline 是否还对齐、键盘 Tab 是否仍落在视觉中心——这些细节一漏，可访问性就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
