如何制作一个看起来像这样的 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;
}
最佳答案
他们使用伪
元素来创建边框效果。如果您使用 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
值,直到为您的特定布局找到正确的值。
关于html - 我该怎么做这个 CSS border-bottom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22122003/