DIY 一个纯 CSS 导航栏下划线跟随效果

前端

2023-12-12 00:46:03

纯 CSS 导航栏下划线跟随效果：巧妙提升用户体验

前言

在日常的网站开发工作中，我们经常需要创建导航栏。导航栏是网站最重要的组成部分之一，它不仅可以帮助用户快速浏览网站内容，还可以提升网站的整体美观性。

在众多的导航栏设计中，下划线跟随效果是一个非常受欢迎且美观的设计元素。当鼠标悬停在导航栏上的某个链接时，下划线会跟随移动并产生平滑过渡。这种效果不仅可以提升用户体验，还可以增加界面的美观性。

传统上，这种效果通常使用 JavaScript 来实现。然而，随着 CSS 技术的不断发展，我们可以使用纯 CSS 来实现这个效果，而无需借助 JavaScript。在本文中，我们将探讨如何使用纯 CSS 创建一个导航栏下划线跟随效果。

纯 CSS 实现导航栏下划线跟随效果

HTML 代码

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS 代码

nav {
  background-color: #333;
}

nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

nav li {
  list-style: none;
  margin-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
}

nav a:hover {
  color: #00ff00;
  text-decoration: none;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background-color: #00ff00;
  transition: all 0.3s ease-in-out;
}

nav a:hover::after {
  width: 100%;
}