列表项下方/下方的 CSS 边框

Question

我有一个导航栏列表。我希望在事件的 li 元素下方有一个边框，而不仅仅是在底部。

我已经能够使用 border-bottom 将边框添加到底部，但同样，它需要位于 li 元素下方。任何帮助将不胜感激。

除了默认的 Bootstrap 导航栏列表之外，这是我到目前为止的自定义 css:

.nav .active{
    border-bottom: 5px solid yellow;
}

见下文:

Answer 1

只是一个例子.....使用 border-bottom 和 background-clip padding box

ul {
  list-style-type: none;
}
li {
  height: 50px;
  width: 180px;
  line-height: 50px;
  border-bottom: 5px solid transparent;
  background: #ddd;
  display: inline-block;
  text-align: center;
  background-clip: padding-box;
}
li:hover {
  border-bottom: 5px solid gold;
}

<ul>
  <li>Hello</li>
  <li>World</li>
</ul>

或者，您可以尝试使用方框阴影。看到这个

ul {
  list-style-type: none;
}
li {
  height: 50px;
  width: 180px;
  line-height: 50px;
  background: #ddd;
  display: inline-block;
  text-align: center;
}
li:hover {
  box-shadow: 0 5px 0 0 gold;
}

<ul>
  <li>Hello</li>
  <li>World</li>
</ul>