Question

我有一些CSS在悬停时定义动画下划线样式，用于我的导航链接。目前，这适用于悬停时的非活动链接，这是完美的。活动链接也保留此下划线。问题是此代码也适用于已经具有此下划线的活动链接。这会在现有的下划线上创建一个额外的下划线，使其外观厚度增加一倍。有什么东西可以在我的导航CSS中调整来解决这个问题吗？一旦链接处于活动状态，我希望下划线保持静态且不变。

body .active-link>a, .text .active-link>a:visited {
   border-bottom: 1px solid #000;
   margin: 0 11px;
   padding: 0 !important;
   }

.horizontal-navigation-bar nav ul li a:after {
   content: '';
   display: block;
   height: 1px;
   width: 0;
   background: transparent;
   transition: width .5s ease, background-color .5s ease;
   }

.horizontal-navigation-bar nav ul li a:hover:after {
   background: #000;
   width: 100%;
   }

非常感谢任何指导！此外，如果这个CSS可以用任何其他方式整理，我也很乐意听到。

供参考，我的网站是：www.tylercharboneauprofessional.com

谢谢，

泰勒

Answer 1

尝试使用not选择器。这将定位不具有类anchor的{{1}}代码。

active-link

Answer 2

最简单的修复是......

.horizontal-navigation-bar nav ul li a:after {
  margin-bottom: -1px;                             /* ... add this line */

（让它们重叠并且根本不在乎。）

Answer 3

您必须将活动链接作为目标，不要在：after伪元素上显示背景。在代码的末尾添加它。希望它有所帮助。

.horizontal-navigation-bar nav ul li.active a:hover:after {
    background: none;
}

Answer 4

如果<meta http-equiv="Cache-control" content="no-cache">来自活动链接，请告诉选择器不要使用背景。

<a>

Answer 5

您有<li>

上的有效链接选择器

所以用它来否定下划线

.active-link a:after { background: transparent; }

如何从活动导航链接中删除不必要的额外下划线？

5 个答案: