用伪元素 ::after 模拟下划线，设 position: relative 于容器，::after 含 content: ""、display: block、height: 2px、bottom: -2px，初始 transform: scaleX(0)，悬停 transition: transform 0.3s ease 至 scaleX(1)，并设 transform-origin: left bottom。
用
实现下划线延伸动画
直接用
无法单独控制下划线长度或做缩放动画，必须用伪元素模拟下划线。核心是：给文字加
，初始
，悬停时过渡到
。
必须设
在文字容器上，否则伪元素定位会错乱
要设
、
、
（或你想要的粗细）
用
控制下划线离文字的距离，数值需配合字体大小微调
过渡要写在伪元素上，不是父元素：
为什么不能只靠
+
模拟
有人试过用子
包文字、再用另一个
做下划线并设
→
过渡，但问题明显：
文字换行时，下划线会断开或错位，
在 inline 元素上天然跟随文本流
动画在 flex 或 grid 容器中容易受父级约束干扰，而
不触发重排，性能更稳
部分浏览器对
的小数像素渲染不一致，
插值更平滑
写在哪？常见漏掉的三处
动画失效往往不是逻辑错，而是过渡属性没挂对地方：
伪元素的
必须配
，写在父元素上无效
如果用了
提升图层，记得只在悬停态加，避免常驻消耗 GPU
别忘了设
（默认是中心），否则缩放会从中间向两边展开，不是从左向右延伸
兼容性与字体适配细节
这个效果在 Chrome/Firefox/Safari（≥15.4）和 Edge ≥100 都没问题，但有两个实际坑点：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
中文字体下划线位置偏高（尤其思源黑体、PingFang），需要手动调
，比如
如果文字用了
> 1，伪元素的
值得按比例放大，否则悬停时下划线会“浮起来”
移动端 Safari 对
+
元素的渲染偶有闪烁，加
可缓解
真正麻烦的是多语言混排场景——英文单词间空格、中文无空格、数字连写，会导致伪元素宽度计算偏差。这时候得放弃纯 CSS，改用 JS 测量
动态设
，
就不管用了。
transform: scaleX()text-decoration::afterscaleX(0)scaleX(1)position: relative::aftercontent: ""display: blockheight: 2pxbottom: -2pxtransition: transform 0.3s easewidthoverflowspanspanwidth: 0width: 100%scaleXwidthtransformwidthscaleXtransitiontransformtransitionwill-change: transformtransform-origin: left bottombottombottom: -4pxline-heightbottomtransforminline-webkit-backface-visibility: hiddengetBoundingClientRect()widthscaleX