css3如何做导航下划线

在 CSS3 中，实现导航下划线有多种常见方式，下面按使用频率和效果从简单到高级给你讲几种主流做法。

一、最基础：直接用 border-bottom

适合：静态下划线

<nav>
  <a href="#">首页</a>
  <a href="#">文章</a>
  <a href="#">关于</a>
</nav>

nav a {
  text-decoration: none;
  padding: 10px;
  border-bottom: 2px solid transparent;
}

nav a:hover {
  border-bottom: 2px solid #007bff;
}

✅ 简单
❌ 下划线不能动态动画

二、用 ::after 伪元素（最推荐）

适合：悬停动画、当前选中状态

1️⃣ 悬停下划线（从左到右展开）

nav a {
  position: relative;
  text-decoration: none;
  padding: 10px;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: width 0.3s;
}

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

✅ 可动画
✅ 不影响布局

2️⃣ 居中展开下划线

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

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

三、当前页面高亮下划线（active）

nav a.active::after {
  width: 100%;
}

<a href="#" class="active">首页</a>

四、Flex 导航 + 下划线

nav {
  display: flex;
  gap: 20px;
}

下划线逻辑不变，依然用 ::after

五、下划线跟随鼠标（高级）

适合：类似 Tab 效果（需 JS 配合）

const line = document.querySelector('.line');
document.querySelectorAll('nav a').forEach(a => {
  a.onmouseenter = () => {
    line.style.left = a.offsetLeft + 'px';
    line.style.width = a.offsetWidth + 'px';
  }
});

.line {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #007bff;
  transition: 0.3s;
}

推荐方案总结

如果你有具体导航样式截图 / 想要某种动画效果，可以直接发我，我帮你写完整代码。