用 scaleY 模拟填充动画因 height 不可自然过渡且 auto 值无法动画，而 transform 可 GPU 加速、不触发重排；伪元素须与文字同级、父元素设 position: relative 和 overflow: hidden，transform-origin: bottom 确保从下往上撑开。
hover 时用 scaleY 模拟填充动画，为什么不能直接 animating height
因为 height 是不可自然过渡的 CSS 属性（auto 值无法动画），硬设固定高度又破坏响应性。用 ::after 伪元素 + transform: scaleY(0) 起手，只动 transform，浏览器能 GPU 加速，流畅且不触发重排。
常见错误是把伪元素放在内容外层容器上，结果悬停区域和动画区域错位；或者忘了设 overflow: hidden，导致 scaleY 放大时内容溢出。
- 伪元素必须和文字同级（即放在
a或button内部），position: absolute定位到文字下方 - 初始状态设
transform: scaleY(0)，transform-origin: bottom，确保从下往上“撑开” - 父元素需设
position: relative，否则伪元素会脱离上下文定位 - 动画用
transition: transform 0.3s ease，别写成all，避免意外过渡其他属性
伪元素填充动画的最小可行 CSS 结构
下面这段代码能直接复制进项目跑通，适用于 a、button、span 等行内元素：
button {
position: relative;
overflow: hidden;
padding: 8px 16px;
}
button::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 2px;
background: #007bff;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
button:hover::after {
transform: scaleY(1);
}
注意：高度值（2px）可调，但别设为 0 —— 否则 Safari 下可能渲染异常；cubic-bezier 比 ease 更可控，避免开头太猛。
立即学习“前端免费学习笔记（深入）”；
多行文本或动态宽度下的适配问题
如果标签文字换行或容器宽度不固定（比如 flex 自适应），width: 100% 的伪元素会铺满整个父容器，而不是贴合文字宽度。
- 解决方法一：改用
background-image: linear-gradient()配合background-size，但无法实现 scaleY 效果 - 解决方法二：用
display: inline-block包裹文字，再对这个内联块加伪元素 —— 更可靠，但需额外 DOM 或 JS 计算宽度 - 更轻量的做法：给按钮加
display: inline-flex，再用align-items: flex-end把伪元素锚定到底部，配合width: fit-content
多数场景下，宁可限制按钮为 inline-block 并手动控制宽度，也别让伪元素在响应式中“漂移”。
兼容性与性能容易被忽略的点
IE11 不支持 transform-origin 在 scaleY 上的精确控制，会默认以中心缩放，看起来像从中间裂开；iOS 14.5 以下 Safari 对 ::after 的 transform 过渡有偶发卡顿。
- 降级方案：加一层
@supports (transform: scaleY(1))查询，不支持时 fallback 为纯色背景渐变 - 不要在大量列表项（如 50+
li）里无差别启用该动画，CPU 渲染压力会上升，尤其低端安卓机 - 如果按钮本身有
border-radius，伪元素也要同步设置相同值，否则动画边缘会露白边
真正麻烦的从来不是写几行 CSS，而是当设计师说“再加个波纹效果”时，你得判断该叠加一个 ::before 还是重构成 SVG mask —— 那时候 scale 就只是个起点了。
