用width过渡原生text-decoration无效，因下划线非独立元素；应使用::after伪元素配合transform: scaleX()实现稳定渐变动画，并注意中英文混排宽度偏差及移动端hover不可靠问题。
hover下划线动画用width过渡为什么常失效
直接给 text-decoration: underline 加 transition: width 0.3s 不起作用——因为下划线不是独立元素，也没有 width 可过渡。浏览器根本不把原生下划线当“可动画属性”处理，width 对它完全无效。
真正能动的是你手动造的“下划线”，比如用 ::after 伪元素画一条横线，再控制它的 width 和 transform。
用::after伪元素实现宽度渐变下划线
核心思路：给文字加相对定位，用 ::after 在底部画一条窄线，初始 width: 0，悬停时撑开到文字宽度。
- 必须给父元素（如
<a>）设position: relative，否则::after无法精确定位到底部 -
::after要设content: ""、display: block、position: absolute - 推荐用
transform: scaleX(0)+transform-origin: left替代纯width，更稳定（尤其中英文混排时文字宽度计算易偏移） - 过渡要写在伪元素上，不是父元素：
::after { transition: transform 0.3s ease; }
a {
position: relative;
color: inherit;
text-decoration: none;
}
a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
a:hover::after {
transform: scaleX(1);
}
中英文/数字混排时下划线错位怎么办
字体不同、字符宽度不均会导致 100% 计算出的伪元素宽度和视觉文字宽度不一致，下划线看起来“不够长”或“超出去”。这不是 bug，是字体度量差异。
立即学习“前端免费学习笔记（深入）”；
- 避免用
width: 100%，改用left: 0; right: 0;配合transform: scaleX()，让拉伸更贴合容器边界 - 如果文字是动态内容（比如用户昵称），加
white-space: nowrap防止换行干扰宽度计算 - 对
<span>类内联元素，确保其display没被意外设为inline（默认即可），否则left/right失效
移动端点击区域小导致hover不触发
真机上没有“悬停”概念，:hover 在 iOS/Android 浏览器里只在点击后短暂生效（甚至不生效），所以纯 :hover 下划线动画在手机端基本不可靠。
- 不要依赖
:hover做关键交互反馈；需要兼容触摸设备，得补:active或用 JS 监听touchstart - 若仅用于桌面端，可在媒体查询里加
@media (hover: hover) and (pointer: fine)包裹 hover 样式，避免误触 - 某些安卓 WebView 会把第一次点击当成 hover 触发，造成“点一下就动、再点才跳转”的怪现象——这时建议统一用
tap-highlight-color: transparent并监听click后加 class 控制动画
