不能。伪元素不参与浏览器点击区域计算，iOS Safari更会忽略其触摸响应，仅适合视觉装饰；扩热区应优先用padding、display调整等基础方案。
伪元素能扩大点击区域吗？不能直接替代 padding
用 ::before 或 ::after 给按钮加一层“透明遮罩”来撑大热区，听起来很巧，但实际不可靠。浏览器判定可点击区域时，只认元素自身的 padding + border + content 框，伪元素不属于该框，也不参与事件捕获——除非你显式给它加 pointer-events: auto，但这时它又可能盖住下方内容、干扰 z-index 层级。
更关键的是：iOS Safari 会忽略伪元素的触摸响应，哪怕样式上看着覆盖了整个热区，touchstart 事件仍只在原始元素边界内触发。
所以别把伪元素当热区扩展主力，它适合做视觉装饰或状态反馈（比如点击波纹），不是交互兜底方案。
为什么有人误以为伪元素有用？常见错觉来源
以下情况容易让人误判伪元素“起了作用”：
立即学习“前端免费学习笔记（深入）”；
- 按钮本身是
inline元素（如<a></a>），没设display: inline-block，导致原生padding垂直方向失效；此时加了::before并设display: block，反而让整个块“看起来”可点了——其实是 display 变更生效了，不是伪元素的功劳 - 父容器有
overflow: hidden，裁掉了按钮的padding区域；而伪元素被渲染在父容器外层（比如用了position: absolute），侥幸逃过裁剪，造成“伪元素撑开了热区”的错觉 - 开发者同时改了
padding和加了伪元素，没做隔离测试，误把padding的效果归功于伪元素
真要扩热区，伪元素只能辅助，且必须配合这些条件
如果坚持用伪元素做视觉增强或微调（比如图标按钮外延一圈隐形热区），需满足：
- 主按钮必须已是
block或inline-block，且已有基础padding - 伪元素需设
content: ""、position: absolute、inset: -12px（数值对应所需热区增量） - 必须加
pointer-events: auto，否则 iOS Safari 完全无视 - 父容器不能有
overflow: hidden或transform，否则伪元素会被裁剪或坐标偏移 - 得额外监听伪元素上的
touchstart，并手动触发按钮逻辑，不能指望事件自动冒泡到原按钮
示例写法（仅作技术验证，不推荐生产环境首选）：
.btn {
position: relative;
padding: 12px 20px;
}
.btn::before {
content: "";
position: absolute;
inset: -12px;
pointer-events: auto;
}
真正该优先检查的三件事
遇到点击不准，先别动伪元素——90% 的问题出在基础设置上：
- 按钮是不是
inline元素？确认已设display: inline-block或block - 有没有意外的
pointer-events: none父层，或z-index被遮挡？用 DevTools 的「Toggle element inspection」悬停看高亮范围是否完整包含padding - 是否漏了
touch-action: manipulation？尤其在滚动容器里，缺它会导致 iOS Safari 把点击误判为滑动
伪元素不是热区开关，它只是 CSS 的一个绘图层；真正的点击区域控制权，始终在 padding、min-width/min-height 和事件绑定方式手里。
