必须用::after而非::before，因::before默认渲染在内容层之下、旧版safari中transform动画支持不稳定、易被遮挡且坐标定位更难生效；若硬要用::before，须加position: relative、content: ""、z-index: 1、用transform: scale()替代宽高变化，并谨慎处理移动端兼容与动画声明。
为什么::before不适合做波纹扩散动效
波纹效果必须从点击点出发、覆盖按钮区域、且不遮挡文字，::before 在多数实际场景中会出问题：它默认渲染顺序在内容层之下（尤其旧版 Safari），z-index 控制不稳定；部分浏览器对 ::before 的 transform 动画支持滞后或闪烁；更关键的是，当按钮含内联文本或图标时，::before 容易被压在底层看不见动画。资料明确指出，主流实现统一选用 ::after——因为它更可靠地渲染在内容上方，且层级行为可预测。
如果硬要用::before，必须满足哪些条件
不是完全不能用，但需严格规避已知缺陷：
- 给按钮加
position: relative，否则::before会相对于body定位，波纹飘走 -
::before必须设content: ""，否则不渲染 - 显式设置
z-index: 1（不能依赖默认值），并确保按钮内容层z-index不高于它 - 避免用
width/height驱动扩散——改用transform: scale()，否则触发布局重排 - 移动端必须监听
touchstart并调用e.preventDefault()，否则 iOS Safari 可能跳过::before的激活态
::before 波纹的 CSS 动画写法差异
和 ::after 方案相比，::before 的动画声明要更谨慎：
- 不能依赖
:active直接触发——iOS Safari 默认禁用，需额外加touch-action: manipulation -
transition必须写在常态规则里，比如button::before { transition: transform 0.4s, opacity 0.4s; }，而不是只写在:active中 - 初始状态必须是
transform: scale(0); opacity: 0;，否则松手瞬间动画中断，只剩“闪一下” - 不要用
@keyframes回放多次——连续点击时，::before的动画实例无法被 JS 清理，容易堆叠卡顿
坐标定位在::before里为何更难生效
想让波纹从点击点扩散，就得动态设 left 和 top。但 ::before 对 CSS 自定义属性（如 --x）的支持不如 ::after 稳定，尤其在 Safari 15–16 中，left: var(--x) 可能被忽略。实操中更常见的失败路径是：
- JS 计算偏移用了
e.clientX - rect.left，但没约束范围，导致left超出按钮宽度，波纹一半消失 - 忘了给按钮加
overflow: hidden，波纹撑出边界，视觉错乱 - 用
transform-origin: center却没配top: 50%; left: 50%，结果缩放中心偏移，波纹歪斜
这些细节在 ::after 方案里已有成熟解法，而 ::before 需要更多兼容性兜底，实际投入产出比低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
