如何禁用Moodle主题导航中active类的hover下划线效果？

我正在为Moodle主题设置样式，给导航添加了下划线hover效果（）。但不希望该效果出现在带有“active”类的导航项上——仅在“server”这类非活跃项显示，“appeareance”这类活跃项不显示。

当前使用的CSS代码：

.nav-item .nav-link {
  position: relative;
}

.nav-item .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 1px;
  background: #FFFFFF;
  transition: 0.4s ease-out;
}

.nav-item .nav-link:hover::after {
  left: 0;
  width: 100%;
}

菜单元素结构示意图：

修改方案 #

根据你的菜单结构（active类加在.nav-item上），只需给CSS选择器添加:not(.active)伪类，排除活跃项即可：

.nav-item .nav-link {
  position: relative;
}

/* 仅为非活跃项的导航链接创建下划线元素 */
.nav-item:not(.active) .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 1px;
  background: #FFFFFF;
  transition: 0.4s ease-out;
}

/* 仅在非活跃项的导航链接hover时触发下划线动画 */
.nav-item:not(.active) .nav-link:hover::after {
  left: 0;
  width: 100%;
}

如果你的active类是直接加在.nav-link本身上的，可改用以下写法：

.nav-item .nav-link {
  position: relative;
}

.nav-item .nav-link:not(.active)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 1px;
  background: #FFFFFF;
  transition: 0.4s ease-out;
}

.nav-item .nav-link:not(.active):hover::after {
  left: 0;
  width: 100%;
}

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