利用:hover与transition实现颜色过渡；2. 通过::after创建滑动下划线；3. 使用::before配合transform实现背景渐显；4. 添加伪元素箭头并控制显隐与位移。核心是结合伪类与高效CSS属性，确保动画流畅自然。
要实现导航条的伪类动态效果，核心是利用 CSS 的伪类选择器配合过渡动画，让交互更自然。常见效果包括悬停变色、下划线滑动、背景渐变、图标位移等。下面介绍几种实用且常见的实现方式。
1. 悬停颜色过渡效果
通过 :hover 伪类改变文字颜色，并使用 transition 添加平滑过渡。
示例代码：
a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #007bff;
}
这样鼠标移到链接上时，文字颜色会缓慢变化，视觉更柔和。
2. 下划线滑动效果
用伪元素 ::after 创建下划线，初始隐藏，悬停时从左到右滑出。
立即学习“前端免费学习笔记（深入）”；
关键思路：- 设置相对定位容器（如 li 或 a）
- 用 ::after 生成下划线，宽度为0，居于底部
- hover 时宽度变为100%，加 transition 实现滑动
a {
position: relative;
display: inline-block;
padding: 10px;
color: #333;
text-decoration: none;
}
a::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease;
}
a:hover::after {
width: 100%;
}
3. 背景色渐显或位移动画
给导航项添加半透明背景，悬停时背景扩展或颜色加深。
例如：背景从中心展开
a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 123, 255, 0.1);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease;
}
a:hover::before {
transform: scaleX(1);
}
4. 图标或箭头出现效果
在文字后添加伪元素，比如显示一个向右箭头，hover 时显现或移动。
a::after {
content: '→';
opacity: 0;
position: absolute;
margin-left: 8px;
transition: opacity 0.3s ease, margin-left 0.3s ease;
}
a:hover::after {
opacity: 1;
margin-left: 12px;
}
