我该怎么做CSS底部边框

Question

我如何做一个看起来像这样的CSS Border-bottom？

您可以在这里的互联网上看到它： http : //themes.laborator.co/neon/frontend/main/

这就是我到目前为止

但我希望它看起来完全像他们是怎么做的！ 请告知，这是到目前为止我所使用的CSS。

.active {
color: #ff4e50;
border-bottom: 5px solid #ff4e50;

}

我要特别问的是如何使它们像他们一样紧密地触摸，并对其进行更改以使其与文本一样宽。 我尝试检查元素，但找不到

==我所有的当前代码：实时预览+实时编辑： http : //jsfiddle.net/FLq5c/3/

HTML：示例公司

     <ul class="nav navbar-nav navbar-right">

      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>

      </ul>

    </div>
  </div>
</div>

的CSS

.customnav {
vertical-align: middle;
padding-top: 40px;
padding-bottom: 40px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 13px;
line-height:20px;

}

.customnav li {
color: blue;

}

.header {

font-size: 28px;

}

.active {
color: #ff4e50;
border-bottom: 3px solid #ff4e50;
line-height: 20px;



}

.active a, .active a:hover {
color: #ff4e50;
}

Answer 1

他们使用pseudo元素创建边框效果。 如果使用Chrome开发工具检查该元素，则可以看到菜单项的span子元素内有一个::after元素，其中包含您感兴趣的相关CSS。

他们这样做的方式是这样的：

.active {
    color: #ff4e50;
    position: relative;
}

.active::after {
    content: '';
    position: absolute;
    height: 2px;
    background: red;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

尝试使用bottom ， left和right值，直到正确使用特定的布局为止。

Answer 2

您将要设置线条的高度或高度：

.active {
    line-height: 20px;
    height: 20px;
    font-size: 16px;
    color: #ff4e50;
    border-bottom: 5px solid #ff4e50;
}

我在这里用您的html和css jsfiddle更新了演示