css - 从文本到下划线的填充或空格

Question

我正在制作一个网站:Website .当特定菜单处于事件状态时，或者您将鼠标悬停在菜单选项上时，我会在菜单栏中添加下划线。

我希望菜单文本到下划线之间有一些 px 空间。这怎么可能？

我尝试设置一个 border-bottom:1px solid white，但这对我来说不起作用。

下划线所在的是下面的CSS:

.wpmega-black-white .wpmm-mega-wrapper > li:hover,
.wpmega-black-white .wpmm-mega-wrapper > li.current-menu-item {
    text-decoration: underline;
    margin-top: 0.8em;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

Answer 1

已编辑
删除以前的代码并按照我写的那样修改您的 CSS:
在您的 CSS 文件 /css/style.css?ver=4.9.4 中找到并更改这些代码块。修改前请做好备份
请注意，您不要删除元素的其他参数，只更改我写的。

   .wp-megamenu-main-wrapper.wpmm-orientation-horizontal ul.wpmm-mega-wrapper > li > a {
        padding: 20px 15px 10px 20px;
    }
    .wp-megamenu-main-wrapper.wpmm-orientation-horizontal ul.wpmm-mega-wrapper > li.current-menu-item a, .wp-megamenu-main-wrapper.wpmm-orientation-vertical ul.wpmm-mega-wrapper > li.current-menu-item a{
    border-bottom: 2px solid #FFF;
    }
    .wp-megamenu-main-wrapper.wpmm-orientation-horizontal.wpmm-askins-wrapper ul.wpmm-mega-wrapper > li.menu-item-has-children > a:after {
        top: 60%;
    }

将其添加到您自己的 css 文件中

.wp-mega-menu-link:hover {
    border-bottom: 2px solid #FFF;
}