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

【问题标题】：Shorten Elementor menu underline on hover / selection在悬停/选择时缩短 Elementor 菜单下划线
【发布时间】：2020-02-24 01:09:54
【问题描述】：

我想缩短我的 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”，我的下划线仍然可以工作。为什么我的代码中需要这个？

一如既往，谢谢。米歇尔

【问题讨论】：

标签： css wordpress elementor

【解决方案1】：

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

selector a {
    display: inline-block;
}

【讨论】：

【解决方案2】：

这段代码运行正常。好Soykot

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

【讨论】：

【解决方案3】：

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

Ans 2：如果你把它放在你的导航菜单小部件 > 高级 > 自定义 css 选项卡或 wp 定制器中，如果你想将它应用到整个站点的任何其他导航菜单，只有这个 css 应该可以正常工作

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

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

【讨论】：