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

Question

我有一些 CSS 为我的导航 link 定义悬停时的动画下划线样式。目前，这适用于悬停时不活动的 links，这是完美的。活动 links 也保留此下划线。问题是此代码也适用于已经具有此下划线的活动 link。

这会在现有下划线的顶部创建一个额外的下划线，使其外观粗一倍。有什么可以在我的导航 CSS 中调整来解决这个问题吗？一旦 link 处于活动状态，我希望下划线保持不变。

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%;
   }

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

Answer 1

尝试使用 not 选择器。这将针对 anchor 标签 而不是 具有 class active-link.

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

Answer 2

最简单的解决方法是...

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

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

Answer 3

您必须将活动 link 定位为不在 :after 伪元素上显示背景。在代码末尾添加它。希望对你有帮助。

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

Answer 4

如果 <a> 是活动 link 的后代，则告诉选择器不要使用背景。

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

Answer 5

您有 <li>

上活动 link 的选择器

所以用它来否定下划线

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

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

How to remove unnecessary additional underline on hover from active navigation links?

css

navigation

underline

hover