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 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能