CSS导航链接下划线动画过长且长度统一问题求助

核心思路是让下划线宽度严格匹配链接文字的实际宽度，而非父容器宽度。通过给导航链接设置贴合文字的布局属性，搭配伪元素实现从左到右的展开动画即可解决问题。

步骤1：调整导航项结构（确保每个链接独立贴合文字） #

假设你的Navbar.jsx结构如下，需保证每个导航链接是独立的可定位元素：

import './App.css';

function Navbar() {
  return (
    <nav className="navbar">
      <a href="/" className="nav-link">首页</a>
      <a href="/about" className="nav-link">关于我们</a>
      <a href="/services" className="nav-link">服务</a>
      <a href="/contact" className="nav-link">联系我们</a>
    </nav>
  );
}

export default Navbar;

步骤2：修改CSS样式（实现适配文字的下划线动画） #

替换你现有的导航链接样式，使用以下代码：

.navbar {
  display: flex;
  gap: 2rem;
  padding: 1rem;
  background: #f5f5f5;
}

.nav-link {
  position: relative;
  text-decoration: none;
  color: #333;
  /* 关键：让链接宽度完全贴合文字内容 */
  display: inline-block;
}

/* 下划线伪元素：初始宽度为0，隐藏状态 */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #2196f3;
  transition: width 0.3s ease;
}

/* 悬停时展开下划线至文字宽度 */
.nav-link:hover::after {
  width: 100%;
}

关键注意事项 #

• 移除nav-link上的width: 100%、flex: 1等强制撑宽属性，这些会导致下划线超出文字范围。
• inline-block是核心：让链接元素的宽度严格匹配内部文字，伪元素的100%宽度会同步适配文字长度。
• 过渡动画仅作用于width属性，保证下划线从左到右平滑展开。

内容的提问来源于stack exchange，提问作者ryanl