CSS如何制作悬停文字下划线动画_利用width过渡

用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，是字体度量差异。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能