伪元素必须设置非none的content值（如content: ""）才能渲染，否则不生成盒模型；且需显式声明display（如block或inline-block）及尺寸或定位，否则无法显示或响应事件。
伪元素必须设 content: "" 且显式声明 display 和尺寸
不写 content: ""，::before 或 ::after 根本不会渲染，更别说响应点击。写了 content: "" 也不够——默认是 display: inline，没有宽高、不占布局空间、无法触发事件。常见错误就是只加了 top/left 却忘了设 display: block 或定位后拉伸。
实操建议：
-
position: absolute是前提，否则伪元素会按文档流排布，扩出去的部分可能错位或被裁剪 - 用
inset: -12px比分别写top/left/right/bottom更简洁，语义也更清晰 - 若需兼容老浏览器（如 IE11），改用
top: -12px; right: -12px; bottom: -12px; left: -12px - 别依赖
width/height百分比——父元素若无明确尺寸，计算会失效
必须设 pointer-events: none 在伪元素上
这是最容易踩的坑：不加这句，伪元素会“吃掉”点击事件，真实按钮收不到 click。它不是用来“启用”热区的，而是让点击穿透到下层宿主元素。很多开发者误以为要设 auto 才能响应，其实恰恰相反。
注意点：
立即学习“前端免费学习笔记（深入）”；
-
pointer-events: none必须加在伪元素上，不是父容器，也不是按钮本身 - 按钮本身保持默认
pointer-events: auto，无需显式声明 - 如果伪元素覆盖了其他可点击兄弟元素（比如悬浮菜单里的相邻按钮），iOS Safari 可能误触发下层元素，这时得靠
z-index分层隔离
父容器 position: relative 不可省略
没有定位上下文，position: absolute 的伪元素会相对于最近的已定位祖先（可能是 body）定位，导致热区飘移。尤其在 Flex/Grid 容器里，子项没设 relative，伪元素很容易脱标。
典型场景：
- 图标按钮（
<button class="icon-btn"></button>）必须加position: relative - 用 Tailwind 时，直接写
relative类，别漏掉 - 如果父容器有
overflow: hidden（比如卡片裁剪、轮播容器），扩出去的热区会被剪掉，得同步调整或换用padding方案
iOS Safari 上热区失效？试试 background: rgba(0,0,0,0.001)
某些 iOS Safari 版本（尤其是 16.x 之前）对完全透明、无背景、无边框的伪元素会做主动渲染裁剪，哪怕尺寸和定位都对，点击依然没反应。这不是 bug，是引擎优化策略。
绕过方法：
- 给伪元素加极低透明度背景：
background: rgba(0,0,0,0.001)，视觉不可见，但足以唤醒渲染管线 - 避免用
opacity: 0替代——它不解决渲染裁剪问题，还可能影响子元素 - 真机测试不能只看 Chrome DevTools 模拟，必须在 iOS 真机上点几次确认
:focus-visible 轮廓、键盘 Tab 导航顺序、以及 aria-label 的读取范围都耦合在一起。伪元素扩出来的区域，屏幕阅读器看不见，也不会被 Tab 焦点捕获——它纯粹服务于指触，不改变可访问性语义。 
