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中找到并更改这些代码块。请在modifinig之前备份请注意，您不应删除元素的其他参数，只能更改我写的内容。

   .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;
}

Answer 2

text-decoration完全按照它的说法执行操作，为文本加下划线...您无法移动该下划线的位置（尚未）。您必须在内跨度上使用定位的伪元素。

例如：

＆＃13;

ul {
  list-style: none;
  background: #000;
}

li {
  display: inline-block;
}

li>a {
  color: white;
  padding: 20px 15px 20px 20px;
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  overflow: visible;
  font-family: "Work Sans", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
  text-align: left;
  text-decoration: none;
}

li>a span {
  position: relative;
}

li>a span::after {
  content: "";
  position: absolute;
  bottom: -10px;
  /* adjust spacing here */
  left: 0;
  width: 0%;
  height: 1px;
  transition: width .3s ease;
  background: transparent;
}

li>a.current-item span::after {
  background: currentcolor;
  width: 100%;
}

li>a:hover span::after {
  width: 100%;
  background: currentcolor;
}

＆＃13;

<ul>
  <li><a href="'" class="current-item"><span>MY TEXT HERE</span></a></li>
  <li><a href="'" class=""><span>MY NEW ITEM</span></a></li>
</ul>

＆＃13;

这也意味着它们可以动画。

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

2 个答案: