可行，但必须满足三个硬性条件：目标元素设position: relative、伪元素设position: absolute、且伪元素加pointer-events: none；缺一不可，否则热区错位、失效或遮挡内容。
直接用 ::before 或 ::after 扩展点击区域，不改盒模型、不挤内容、不破布局——这是可行的，但必须满足三个硬性条件：目标元素有 position: relative、伪元素设 position: absolute、且伪元素加 pointer-events: none。缺一不可。
为什么伪元素必须配合 position: relative 才能准确定位
目标元素没设 position: relative，::before 会向上找最近的已定位祖先，可能落到 body 或某个意外父容器里，热区就飘了。常见现象是点击区域出现在左上角、只覆盖一半、或完全失效。
- 给按钮、链接、图标容器等目标元素显式加
position: relative - 别指望父级容器“顺便”提供定位上下文——它不一定存在，也不一定是你想锚定的那个层级
- 即使目标元素本身是
display: inline（比如<span>），也得加position: relative，否则absolute会脱标到 body
::before 没反应？先检查这三件事
伪元素默认是 inline，content: "" 只是让它渲染出来，但没尺寸、不占空间、不响应事件。它不会自动“撑开”点击区。
- 必须写
content: ""，否则不渲染 - 必须设
display: block或直接用position: absolute（后者更常用） - 必须指定尺寸：用
inset: -8px或top: -8px; right: -8px; bottom: -8px; left: -8px拉伸，不能只靠width/height百分比——某些浏览器对百分比高度计算不准
如何避免伪元素遮挡原内容或 sibling 元素
伪元素默认渲染在原元素之上，文字、图标、子控件全被盖住。关键不是“要不要加 z-index”，而是怎么加、加在哪一层。
立即学习“前端免费学习笔记（深入）”；
- 给目标元素设
z-index: 1（哪怕只是 1），确保它有自己的层叠上下文 - 给
::before设z-index: -1，它就沉到底层，视觉不可见但点击有效 - 绝对不要给伪元素设正向
z-index（比如z-index: 2），否则可能意外盖住相邻元素 - 如果父容器有
overflow: hidden，扩出去的部分会被裁掉——得同步调整父容器或换用clip-path配合
移动端和高倍屏下容易失效的隐藏陷阱
在 iOS Safari 或安卓 WebView 中点不中，大概率不是 CSS 写错了，而是热区映射失真或交互层被拦截。
-
pointer-events: none必须显式写在伪元素上，不能省略——这是让点击穿透到真实元素的关键 - 避免用
transform: scale()模拟放大，它会破坏触摸坐标映射；改用inset或四边偏移 +width/height - 扩展量至少 8px 起：iOS 要求最小触控目标为 44×44pt，2x 屏下 8px 才够 16 物理像素，太小会误触
- 别在
:active里改伪元素尺寸，会导致点击反馈抖动，用户感知明显
最麻烦的不是写几行 CSS，而是扩完之后忘了测键盘焦点 outline 是否还对齐、focus-visible 是否仍套在正确位置、以及 touch-action: manipulation 是否加在真实可点击元素上——这些细节不验证，交互体验就断层了。
