在所选菜单项下方添加细线。 WordPress的

Question

有人能指出我在正确的方向在WP网站的选定菜单项下添加细线或图标吗？这是我的意思的一个例子。

http://thehalogroup.com/work/

Answer 1

根据您想要的视觉效果，有多种处理方式。

示例1 - 锚元素

＆＃13;

＆＃13;

ul, li {
  margin: 0;
  padding: 0;
}
a {
  font-family: sans-serif;
  color: #333;
  line-height: 2rem;
  text-decoration: none;
}
li {
  display: inline-block;
}
.example-1 .active a,
.example-1 a:hover {
  border-bottom: 2px solid orange;
}

＆＃13;

<ul class="example-1">
  <li><a href="#">One</a></li>
  <li class="active"><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

如果将边框应用于<a>元素，则向<a>添加填充以向下推边框。

示例2 - 父元素

＆＃13;

＆＃13;

ul, li {
  margin: 0;
  padding: 0;
}
a {
  font-family: sans-serif;
  color: #333;
  line-height: 2rem;
  text-decoration: none;
}
li {
  display: inline-block;
}
.example-2 .active,
.example-2 li:hover {
  border-bottom: 2px solid orange;
}

＆＃13;

<ul class="example-2">
  <li><a href="#">One</a></li>
  <li class="active"><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

这里额外的间距来自锚元素的线高而不是填充。

示例3 - 伪元素

＆＃13;

＆＃13;

ul, li {
  margin: 0;
  padding: 0;
}
a {
  font-family: sans-serif;
  color: #333;
  line-height: 2rem;
  text-decoration: none;
}
li {
  display: inline-block;
}
.example-3 .active {
  position: relative;
}
.example-3 .active:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 50%;
  height: 2px;
  transform: translateX( -50% );
  background-color: orange;
}

＆＃13;

<ul class="example-3">
  <li><a href="#">One</a></li>
  <li class="active"><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

使用伪元素，您可以在尺寸，位置等方面获得更多创意。

Answer 2

使用CSS

text-decoration: underline;

如果你想要下划线或

border-bottom: 1px solid black;

如果你希望它在你的例子中看起来像。

这是一个代码示例 https://jsfiddle.net/1woa1xmm/2/

Answer 3

如果你看一下html，你会看到很多课程。您需要的课程是current-menu-item，只需提供border-bottom

即可

类似

.current-menu-item {
    border-bottom: 1px solid #ff0000;
}

你可能想要添加额外的类/选择器，这样你才能进入顶层菜单。