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

在网页开发中，我们常给链接或导航项添加hover下划线效果。但很多人直接用border-bottom或text-decoration在hover时切换，导致下划线是突然出现的，没有过渡。要解决这个问题，可以利用伪元素加transition-width，让下划线宽度从0变到100%，视觉上就是从左边慢慢画到右边。

为什么下划线会突然出现

如果使用如下写法，下划线在hover时直接显示，因为text-decoration或border-bottom本身不支持宽度从0到完整的过渡：

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

浏览器无法对underline做宽度动画，所以看起来就是“突然出现”。

用transition-width实现从左向右过渡

思路是：用伪元素::after画一条线，默认宽度为0，hover时宽度变为100%，并对width使用transition。

基础结构

<a href="https://ipipp.com" class="link">首页</a>

样式代码

.link {
  position: relative;
  text-decoration: none;
  color: #333;
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #409eff;
  transition: width 0.3s ease;
}
.link:hover::after {
  width: 100%;
}

这样下划线就会在0.3秒内从左向右展开，而不是突然出现。

注意事项

• 伪元素需要父级设置position: relative，否则定位会偏移。
• 如果下划线要从右向左，可以把left改成right。
• transition-width中对width的过渡在低版本IE不支持，但现代浏览器均无问题。

小结

下划线突然出现是因为直接切换了显示属性。改用伪元素配合transition-width控制宽度变化，就能轻松实现从左向右的平滑hover下划线过渡，提升界面细腻度。

csstransition_widthhover下划线修改时间：2026-07-28 04:39:14