实战要点：导航栏下划线动画与宽度控制的实现要点
一、核心原理与设计要点
在实现导航栏下划线动画与宽度控制的过程中，伪元素（如 ::after、::before）是核心工具，可以用来绘制独立于文本的下划线线条，并通过 transition 实现平滑过渡。常见的做法是将下划线作为伪元素的背景线，绑定到链接文本的底部位置，确保与文本宽度对齐。
动画平滑性是另一个关键点。通过设置 transition 的持续时间、时序函数（如 ease、cubic-bezier）以及触发时机，可以让下划线在鼠标悬停、聚焦或活动状态时自然出现或消失。
为了实现不同视觉效果，你可以在同一个元素上用两种不同的控制方式：一种使用 transform: scaleX，另一种使用 width。两者都能达到从左向右展开的感觉，但背后的实现和对父元素宽度的依赖略有不同。
在设计时，务必考虑无障碍性和响应式需求，例如为键盘导航提供聚焦状态、使用 focus-visible 来区分鼠标与键盘触发，并用 CSS 变量统一颜色与尺寸，方便后续维护。
二、两种实现方式的代码示例
下面给出两种常见实现方式的具体代码示例，帮助你在实际项目中快速落地。第一种采用 transform: scaleX 实现动态扩展；第二种直接通过 width 的变化来控制下划线宽度。请结合你的需求选择合适的实现方案。
/* 方法A：使用 transform: scaleX 实现下划线动画（scaleX） */
.nav-list { display:flex; gap:28px; list-style:none; padding:0; margin:0; }
.nav-item { position: relative; }/* 通用下划线，使用 ::after 伪元素 */
.nav-link {position: relative;display: inline-block;padding: 8px 0;color:#333;text-decoration: none;
}
.nav-link::after {content: "";position: absolute;left: 0;bottom: 0;height: 2px;width: 100%;background: #1e90ff;transform: scaleX(0);transform-origin: left;transition: transform 0.25s ease;
}/* 聚焦与激活状态的动画触发 */
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after {transform: scaleX(1);
}
/* 方法B：通过 width 控制下划线宽度 */
.nav-list { display:flex; gap:28px; list-style:none; padding:0; margin:0; }
.nav-item { position: relative; }.nav-link {position: relative;display: inline-block;padding: 8px 0;color:#333;text-decoration: none;
}
.nav-link::before {content: "";position: absolute;left: 0;bottom: 0;height: 2px;width: 0;background: #ff6347;transition: width 0.25s ease;
}
.nav-link:hover::before,
.nav-link:focus-visible::before,
.nav-link.active::before {width: 100%;
}
在两种实现中，transition 的时长与曲线直接影响动画的观感。你可以通过调整 transition-duration、transition-timing-function 来获得不同的动画速率与平滑度。
需要强调的是，方法A（scaleX）通常对不同文本宽度更适应，因其下划线宽度始终与文本宽度一致；而方法B（width）在需要精准控制下划线长度时更直观，但需要确保文本容器的宽度稳定。
如果你的项目有颜色主题的需求，可以通过 CSS 变量统一管理。例如：--underline-color、--text-color，并在伪元素中使用 background 或 border-color 指向变量值，便于全局统一与切换主题。
三、无障碍性与响应式设计
实现下划线动画时要考虑无障碍性：为链接添加可聚焦样式，并确保聚焦状态下下划线仍然可见。可以利用 focus-visible 伪类，使得只有键盘聚焦时才显示额外的焦点样式，这样既美观又符合无障碍原则。
在响应式场景下，使用 flex 布局和适度的 gap 可以让导航项在不同设备宽度下保持良好的间距与对齐；同时，避免固定宽度导致的溢出问题，确保文本在多行场景下仍然有良好可读性。
