用于 Wordpress Customizr 主题导航悬停动画的 CSS

Question

一段时间以来，我一直在为这件看似微不足道的事情绞尽脑汁，但我已经束手无策了。我在我的网站上运行一个免费的 Customizr 主题。

我想要实现的是拥有 hover effect in the navigation bar like this demo here.如您所见，只有下拉菜单项的文本带有漂亮的下划线。

我在这里找到并尝试使用这个 CSS 代码:

.sliding-middle a {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.sliding-middle a:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .3s ease, background-color .3s ease;
}
.sliding-middle a:hover:after {
    width: 100%;
    background: #08c;
}

然而，我得到的结果是as you can see here ，下拉菜单项始终带有下划线。我发现如果我不针对“a”标签，该行在主菜单项上会显得更加奇怪。但是通过这样做，整个子菜单都继承了这种效果。

如果有人知道我缺少什么，请帮助我。提前致谢!

Answer 1

您要实现的示例在 a 内使用了两个跨度节点，并且仅针对第一个节点(添加一个伪 :before)使用此 CSS

.header-skin-light [class*=nav__menu] li>a>span:first-of-type:hover::before {
    background-color: #313131;
    visibility: visible;
    -webkit-transform: translate3d(0,0,0) scaleX(1);
    -moz-transform: translate3d(0,0,0) scaleX(1);
    transform: translate3d(0,0,0) scaleX(1);
}

如果您为链接文本添加跨度，您应该会得到几乎相同的结果。