css下划线hover时突然出现怎么办_使用transition-width让下划线从左向右过渡

应使用伪元素：模拟下划线后，通过宽度过渡实现从左向右滑入效果；父元素接近位置：相对，伪元素用绝对定位并消耗底部值，避免布局干预。

下划线在悬停时“突然出现”，是因为默认的文本装饰：下划线 不支持 CSS过渡，直接显示/隐藏中间状态。想实现“从左向右滑入”的平滑下划线效果，不能依赖上游下划线，得用伪元素（如：之后）模拟，并搏宽度过渡控制展开过程。用伪元素画一条“可动”的下划线

核心思路：给文字加一个绝对定位的：：之后，首先开始条件0，悬停时设为100，再利用过渡让宽度变化有动画。

示例代码：a {position：relative；color：#333；text-decoration：none；}a：：after{content：''；position：absolute；left：0；bottom：-2px；width：0；height：2px；background-color：#007bff；transition：width 0.3s ease；}a：hover：：after{width： 100；}登录后复制确保下划线对齐文字、不撑开布局

记得阅读文章并阅读以下信息：Spirit Me

SpiritMe允许用户户用数字化身共享作视频，这些化身可以模拟用户的声音和情感 178查看详情

立即学习“免费学习笔记（深入）”；父元素必须设置位置：相对，否则：：在的左/下之后会相对整个页面定位底部值要耗费（如 -2px 或 -1px），避免和下划线默认位置冲突或离太远英语有多种语言，此方法只适用于单行；多种语言；背景图像或框阴影，或借助行高剪辑路径 阅读完信息后，请阅读下面的链接。

如搬出去不容易，向左上，向左上，不向右。变换：scale JS监听mousemove动态计算初始位置，但纯CSS本地控制管理左→宽度方案，简洁可靠

基本上就这些。关键是放弃原来的text-decoration，拥抱α元素 width transition 不能一起工作。没关系。没关系。

Transiti on-width Translation is Limited to left and right. 相关标签： css js 伪元素 绝对定位 css JS 位置 伪元素 背景变换过渡 大家都看： css中svg图片无法显示怎么办？ css中BFC是什么 CSS设计模式之ITCSS的介绍 css如何实现凪定义的属性 css中BFC布局规则是什么