CSS导航栏active状态下划线定位偏移问题修复方案

问题根因 #

下划线偏移是三个代码问题共同导致的：

• 定位基准不匹配：外层li设置了相对定位，但生成下划线的::after伪元素绑定在a标签上，a标签本身未设置相对定位，导致绝对定位的伪元素会以带左右内边距的li为定位参考，而非导航文字本身。
• CSS语法笔误：伪元素样式中重复声明了position属性，第二行错误写为position: 0，属于无效语法，原本要配置的水平定位规则完全失效。
• 缺少居中逻辑：原代码未设置水平偏移规则，就算定位正确，下划线也会默认贴在元素左侧，无法实现居中对齐效果。

预期效果 #

异常效果 #

修复步骤 #

• 给#navbar li a选择器添加position: relative，让伪元素直接以导航文字所在的a标签为定位基准，排除外层li内边距的影响。
• 删除伪元素中无效的position: 0错误代码，添加left: 50% + transform: translateX(-50%)规则，实现下划线相对于导航文字水平居中。
• 保留原有bottom: -6px的垂直偏移配置，控制下划线和文字的间距。

修复后完整CSS代码 #

body {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  margin: 0;
  background-color: #121212;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 80px;
  background: #121212;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#navbar li {
  list-style: none;
  padding: 0 20px;
  position: relative;
}

#navbar li a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  transition: 200ms ease-in-out;
  /* 新增：设置相对定位作为伪元素的定位基准 */
  position: relative;
}

#navbar li a:hover,
#navbar li a.active {
  color: #e50914;
}

#navbar li a.active::after {
  content: "";
  width: 60%;
  height: 3px;
  background: #e50914;
  position: absolute;
  bottom: -6px;
  /* 替换错误的position:0，添加水平居中逻辑 */
  left: 50%;
  transform: translateX(-50%);
}

.logo {
  width: 10rem;
}

原有HTML结构不需要任何调整，替换CSS后即可实现下划线居中显示在激活导航项文字下方的效果。如果需要hover导航项时也显示下划线，只要把伪元素的选择器改为#navbar li a:hover::after, #navbar li a.active::after即可。

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