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

Posted 2023-03-06

【中文标题】在悬停/选择时缩短 Elementor 菜单下划线

【英文标题】：Shorten Elementor menu underline on hover / selection

【发布时间】：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”，我的下划线仍然可以工作。为什么我的代码中需要这个？

一如既往，谢谢。 米歇尔

【参考方案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 用于避免影响导航菜单小部件的其他指针样式，例如框架选项。