CSS导航悬停下划线动画实现技巧

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《CSS导航菜单悬停下划线动画实现方法》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

使用CSS ::after伪元素和transition实现悬停下划线动画。1. 构建导航结构；2. 设置链接基础样式；3. 添加::after伪元素并定义宽度过渡；4. 通过hover触发width:100%实现展开效果，支持左右或居中动画，流畅且兼容性强。

要实现导航菜单在悬停时出现下划线动画效果，可以使用 CSS 的 ::after 伪元素结合 transition 控制宽度变化。这种方式视觉流畅，适合现代网页设计。

1. 基础结构：HTML 菜单

先构建一个简单的导航结构：

<nav class="menu">
  <a href="#" class="active">首页</a>
  <a href="#">关于</a>
  <a href="#">服务</a>
  <a href="#">联系</a>
</nav>

2. 设置基础样式

为导航链接设置基本样式，隐藏默认下划线，定位伪元素：

.menu a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  position: relative;
  display: inline-block;
}

3. 使用 ::after 创建下划线

通过 ::after 在每个链接下方添加一条窄线，并设置过渡动画：

.menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #007acc;
  transition: width 0.3s ease;
}

.menu a:hover::after {
  width: 100%;
}

这样，鼠标移上时，下划线会从左向右伸展出来。

4. 可选优化：居中展开动画

如果希望下划线从中间向两边展开，可以调整伪元素的初始状态：

.menu a::after {
  left: 50%;
  transform: translateX(-50%);
  width: 0;
}

.menu a:hover::after {
  width: 100%;
}

利用 transform 实现中心对齐扩展，视觉更优雅。

基本上就这些。使用 ::after 和 transition 控制 width，就能轻松做出平滑的悬停下划线动画，不依赖 JavaScript，性能好，兼容性也强。

本篇关于《CSS导航悬停下划线动画实现技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！