如何基于CSS伪元素与过渡实现标签导航？代码问题排查与修复

你的代码存在几个关键缺失和问题，导致底部动画条无法正常工作：

问题分析 #

• HTML结构不合法：<strong>是行内元素，不能直接包裹块级元素<li>，会引发布局异常
• 伪元素缺少基础布局配置：::after伪元素默认是inline状态，没有定位和初始隐藏样式，无法实现过渡动画
• 无激活状态控制逻辑：未定义点击后导航项的激活类，无法触发伪元素的显示过渡
• 过渡触发条件缺失：伪元素没有初始"隐藏"状态，过渡效果没有变化起点，无法生效

修复步骤及完整代码 #

1. 修正HTML结构 #

移除包裹<li>的<strong>标签，若需要文字加粗，通过CSS给<li>设置font-weight: bold替代。

2. 完善CSS样式 #

给<li>设置相对定位，为伪元素提供定位基准；给::after设置初始隐藏状态和过渡属性；添加激活类控制伪元素显示。

3. 补充JavaScript逻辑 #

实现点击导航项时，给当前项添加激活类，移除其他项的激活类，触发动画。

完整代码

<nav>
  <ul class="nav_link">
    <li onclick="tabs(this, 'avisos')" class="active">Avisos</li>
    <li onclick="tabs(this, 'atividades')">Atividades</li>
    <li onclick="tabs(this, 'trabalhos')">Trabalhos</li>
    <li onclick="tabs(this, 'provas')">Provas</li>
    <li onclick="tabs(this, 'aulas')">Aulas</li>
  </ul>
</nav>

<style>
.nav_link {
  list-style: none;
  display: flex;
  gap: 2rem;
  padding: 0;
  margin: 0;
}

.nav_link li {
  position: relative;
  padding: 0.5rem 0;
  cursor: pointer;
  font-weight: bold; /* 替代原strong标签的加粗效果 */
}

.nav_link li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: red;
  border-radius: 2px;
  transition: width 0.3s ease-in-out;
}

.nav_link li.active::after {
  width: 100%;
}
</style>

<script>
function tabs(el, tabName) {
  // 移除所有li的active类
  document.querySelectorAll('.nav_link li').forEach(item => {
    item.classList.remove('active');
  });
  // 给当前点击的li添加active类
  el.classList.add('active');
  
  // 可保留原有tab切换逻辑，比如显示对应内容
  // 示例：console.log(`切换到${tabName}标签`);
}
</script>

效果说明 #

• 初始状态下第一个导航项默认激活，显示底部红色条
• 点击任意导航项时，底部条会通过过渡动画从0宽度扩展到100%宽度
• 所有样式通过CSS伪元素实现过渡，符合需求

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