html - 我该怎么做这个 CSS border-bottom

标签 html css

如何制作一个看起来像这样的 CSS Border-bottom? http://i.stack.imgur.com/eBbXC.png

您可以在互联网上的此处查看:http://themes.laborator.co/neon/frontend/main/

这就是我目前所得到的

http://i.stack.imgur.com/bK2M0.png

但我希望它看起来像他们是如何做到的!请告知,这是我为获得目前所拥有的内容所做的 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;
}

最佳答案

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

他们的做法是这样的:

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

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

尝试使用 bottomleftright 值,直到为您的特定布局找到正确的值。

关于html - 我该怎么做这个 CSS border-bottom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22122003/

相关文章:

javascript - Google Docs 如何在 JavaScript 中全屏显示

javascript - 选中/取消选中复选框时如何隐藏/显示表单的一部分?

html - 960 网格系统嵌套网格单元

html - 对齐标签和自定义复选框

html - 如何在与导航链接相同的空间中获取导航栏 Logo 和名称?

c# - 无法从 "method group"转换为 "string"

web-applications - 如何清除 Safari 中网络应用程序的离线缓存?

javascript - 我如何将 CSS 类传递给 React 子项并确保它们将覆盖子项的本地类?

css - 在 SVG 中,有没有办法告诉子元素不随父元素变换?

html - 容器 Div 的背景颜色不起作用,不明白为什么?