在悬停/选择时缩短 Elementor 菜单下划线

Question

我想缩短我的 Wordpress 网站的 Elementor header 菜单中的 "underline"：Shortening of header underline - screenshot

我用这段代码来实现这个（我从别处复制的）：

.

elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after
{ 
    width: 70%; 
    right: 0; 
    margin: 0 auto; 
}

问题 1: 有没有更简洁/更好的方法来实现我想要的？

问题二： 如果我完全删除 ".elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:在 " 之前，我的下划线仍然有效。为什么我的代码中需要这个？

一如既往，谢谢。米歇尔

Answer 1

Ans 1：现在没有其他方法可以做到这一点。

回答 2：只有将 css 放在导航菜单小部件 > 高级 > 自定义 css 选项卡中或 wp 定制器中才能正常工作整个网站的导航菜单

.e--pointer-underline .elementor-item:after {
width: 50%;
margin: 0 auto;
right: 0;
}

您拥有的另一个 css 用于避免影响导航菜单小部件的其他指针样式，例如框架选项。

Answer 2

此代码有效 properly.good Soykot

.e--pointer-underline .elementor-item:after {
width: 50%;
margin: 0 auto;
right: 0;
}

Answer 3

如果您希望它与垂直菜单一起使用，您可以执行以下菜单自定义 CSS：

selector a {
    display: inline-block;
}

在悬停/选择时缩短 Elementor 菜单下划线

Shorten Elementor menu underline on hover / selection

css

wordpress

elementor