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

Question

我想缩短我的 Wordpress 网站的 Elementor 标题菜单中的“下划线”: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:有没有更简洁/更好的方法来实现我想要的？

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

一如既往，谢谢。米歇尔

Answer 1

答案 1:现在没有其他方法可以做到这一点。

答案 2:如果您将它放在导航菜单小部件 > 高级 > 自定义 css 选项卡中，或者如果您想将它应用到整个站点的任何其他导航菜单，则只有这个 css 应该可以正常工作

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

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