如何使用带有线条边框的CSS在底部边框中添加小圆圈答案

【问题标题】：How to add small circle in the bottom boarder using CSS with the line border如何使用带有线条边框的CSS在底部边框中添加小圆圈
【发布时间】：2020-04-23 11:44:54
【问题描述】：

我想使用 CSS 在菜单项下添加一个小圆圈，如下图所示：

到目前为止我做了什么：

这是 HTML：

<ul>
 <li class="nav-item">
   <a href="#" class="active">VISION</a>
 </li>
 <li class="nav-item">
   <a href="#">CULTURE</a>
 </li>
 <li class="nav-item">
   <a href="#">SPACE</a>
 </li>
 <li class="nav-item">
   <a href="#">CONTACT US</a>
 </li>
</ul>

这里是“导航项”CSS：

.nav-item {
 font-family:"Geometria-Light";
 font-size: 12px;
 border-bottom: .2px solid #C29B4C;
 color:#FFFFFF!important;
}

这里是“活跃的”CSS：

.active{
 border-bottom: .2px solid #C29B4C;
 color:#C29B4C !important;
}

谁能向我解释我怎样才能做到这一点？

【问题讨论】：

你能发布你现有的 HTML 和 CSS 吗？
当然，我编辑了我的问题。
@IhabShouly 当导航栏悬停时你想要它吗？
是的，当悬停时。

标签： html css

【解决方案1】：

这是一个例子

ul {
  display: flex;
}

.nav-item {
  list-style: none;
  padding: 5px 10px;
  border-bottom: .2px solid #C29B4C;
  margin: 0;
}

.nav-link {
  font-family: "Geometria-Light";
  font-size: 12px;
  margin: 0;
  text-decoration: none;
}

.item-active {
  position: relative;
}

.item-active a {
  color: #C29B4C !important;
}

.item-active:before {
  content: '';
  height: 8px;
  width: 8px;
  background-color: #C29B4C;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  bottom: -4px;
  left: 50%;
}

<ul>
  <li class="nav-item">
    <a href="#" class="nav-link">it0</a>
  </li>
  <li class="nav-item item-active">
    <a href="#" class="nav-link ">VISION</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">it2</a>
  </li>
</ul>

【讨论】：

【解决方案2】：

使用 .dot 类更新您的导航项

<li class="nav-item">
 <a href="#" class="nav-link item-active">VISION</a>
 <span class="dot"></span>
</li>

这是.class css代码

.item-active .dot {
    height: 25px;
    width: 25px;
    background-color: #C29B4C;
    border-radius: 50%;
    display: inline-block;
    margin-top: 40px;
    position: absolute;
    text-align: center;
}

我认为这对你有用

【讨论】：

我喜欢你的想法，这很好，但我更喜欢使用“Quetzalcoatl”答案，因为“item-active”选择器会在点击时发生变化。