如何实现垂直导航栏hover下划线精准匹配单词首尾的效果？

调整要点 #

• 让导航项宽度适配文字内容，避免下划线撑满父容器
• 修正下划线的起始位置，确保从文字左侧开始延伸
• 优化垂直布局的间距，提升视觉效果

修改后的代码 #

CSS

.col-1 ul {
  padding-left: 0; /* 移除ul默认的左侧内边距，让导航对齐更整齐 */
}

.col-1 ul li { 
  list-style: none;
  display: block; 
  margin: 10px 20px; /* 增加上下间距，优化垂直堆叠的视觉效果 */
  color: #e4c95e; 
  position: relative;
  width: fit-content; /* 让li宽度仅包裹文字内容 */
}

.col-1 ul li a {
  text-decoration: none;
  text-transform: uppercase;
  color: inherit; /* 继承li的文字颜色，确保样式统一 */
}

.col-1 ul li::after {
  content: '';
  height: 3px; 
  width: 0; 
  background: #925e02;
  position: absolute;
  bottom: -10px;
  left: 0; /* 下划线从文字最左侧开始 */
  transition: 0.5s; 
}

.col-1 ul li:hover::after {
  width: 100%; /* hover时下划线完全覆盖文字宽度 */
}

HTML

<div class="col-1">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Meet The Squad</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</div>

关键修改说明 #

1. 给ul添加padding-left: 0，消除默认缩进，让导航项对齐更整洁
2. 给li设置width: fit-content，限制列表项宽度仅适配文字，避免下划线超出范围
3. 给伪元素::after添加left: 0，确保下划线从文字左侧开始延伸
4. 将hover状态的width: 20%改为width: 100%，实现下划线覆盖整个文字的效果
5. 给a标签添加color: inherit，保证链接文字颜色与列表项一致

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