应使用伪元素::after模拟下划线，通过width过渡实现从左向右滑入效果；父元素需设position: relative，伪元素用absolute定位并微调bottom值，避免布局干扰。
下划线在 hover 时“突然出现”，是因为默认的 text-decoration: underline 不支持 CSS 过渡（transition），直接显示/隐藏没有中间状态。想实现“从左向右滑入”的平滑下划线效果，不能依赖原生下划线，得用伪元素（如 ::after）模拟，并配合 width + transition 控制展开过程。
核心思路：给文字加一个绝对定位的 ::after，初始宽度为 0，hover 时设为 100%，再用 transition 让宽度变化有动画。
示例代码：
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%;
}
伪元素默认脱离文档流，但需注意几个细节：
立即学习“前端免费学习笔记（深入）”；
position: relative，否则 ::after 的 left/bottom 会相对整个页面定位-2px 或 -1px），避免和默认下划线位置冲突或离得太远background-image 或 box-shadow 模拟，或借助 line-height + clip-path
如果希望下划线不是从最左开始，而是从文字中心或鼠标进入点出发，可以：
transform: scaleX(0) + origin 控制缩放中心（比如 transform-origin: left 就是左起）transition-delay 实现入场节奏差异mousemove 动态计算起始位置，但纯 CSS 场景推荐保持 left → width 方案，简洁可靠基本上就这些。关键是放弃原生 text-decoration，拥抱伪元素 + width + transition 组合。不复杂但容易忽略定位上下文和尺寸微调。
以上就是css下划线hover时突然出现怎么办_使用transition-width让下划线从左向右过渡的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
726
收藏
取消收藏
