CSS border under/below list item - css

Question

I have a list for my navbar. I want to have a border below the active li item, not just on the bottom.
I've been able to add the border to the bottom using border-bottom, but again, it needs to be below the li element. Any help would be appreciated.
Here is my custom css so far, in addition to default Bootstrap navbar list:
.nav .active{
border-bottom: 5px solid yellow;
}
See below:

Answer 1

Just an example ..... use border-bottom with 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>
Altarnatively you can try box shadow. see this
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>

Answer 2

Try like this: demo
CSS:
ul.nav {
list-style-type: none;
}
li {
display:block;
float:left;
line-height: 26px;
margin-right:10px;
background-color:#ccc;
padding:4px 10px;
border-bottom: 5px solid transparent;
}
li a{
text-decoration:none;
color:#000;
}
li:hover, li.active {
border-bottom: 5px solid red;
}
HTML:
<ul class="nav">
<li> Menu 1
</li>
<li class="active"> Menu 1
</li>
<li> Menu 1
</li>
<li> Menu 1
</li>
</ul>

Answer 3

I typically use an :after for small details like this, to get the border outside the menu items normal height.
HTML:
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="main">
Next Box
</div>
CSS:
html,body{
margin:0px;
padding:0px;
}
ul{
/* for looks */
list-style:none;
margin:0px;
padding:0px;
}
li{
background:black;
color:white;
display:inline-block;
margin:0px;
padding:5px 20px;
}
li.active{
position:relative;
}
li.active:after{
content:'';
position:absolute;
top:100%;
left:0px;
border-top:5px solid yellow;
width:100%;
}
.main{
background-color:#dddddd;
min-height:400px;
}
Most of the css is just for presentation but the key stuff is on the li, the li.active, and the li.active:after.
You can check out my demo at jsfiddle

Answer 4

This is the sample I always use. Hope this can help you ;)
This method is using the last child of the "li" element as the border.
The class "selected" on "li" element choose the position of the border to stay at initial.
When the mouse is on one of the menu bar button, the bar will follow it by an animation.
If you don't want an animation, please just delete ALL transition CSS style in ".menu > li:last-child" class.
If you want to know more about last child CSS style, please go to this link >> http://www.w3schools.com/cssref/sel_last-child.asp
.menu, .menu li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.menu {
margin: auto;
position: relative;
overflow: hidden;
height: 25px;
}
.menu li {padding: 0px 5px;}
.menu > li {
text-align: center;
width: 80px;
font-size: 14px;
}
.menu > li > a {
display: block;
padding: 0px 0px;
color: #444;
text-decoration: none;
font-size: 15px;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
.menu li a:hover {
color: #ffa500;
}
.menu > li:last-child {
position: absolute;
top: 20px;
right: -90px;
height: 5px;
width: 80px;
background: #ffa500;
-webkit-transition: transform 0.5s ease;
-moz-transition: transform 0.5s ease;
-ms-transition: transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
}
.menu .selected {
position: relative;
pointer-events: none;
cursor: default;
}
.selected a {
color: #ffa500 !important;
}
.menu li:nth-child(1):hover ~ li:last-child {
-webkit-transform:translateX(-375px) !important;
-moz-transform:translateX(-375px) !important;
-ms-transform:translateX(-375px) !important;
-o-transform:translateX(-375px) !important;
transform:translateX(-375px) !important;
}
.menu li:nth-child(1).selected ~ li:last-child {
-webkit-transform:translateX(-375px);
-moz-transform:translateX(-375px);
-ms-transform:translateX(-375px);
-o-transform:translateX(-375px);
transform:translateX(-375px);
}
.menu li:nth-child(2):hover ~ li:last-child {
-webkit-transform:translateX(-280px) !important;
-moz-transform:translateX(-280px) !important;
-ms-transform:translateX(-280px) !important;
-o-transform:translateX(-280px) !important;
transform:translateX(-280px) !important;
}
.menu li:nth-child(2).selected ~ li:last-child {
-webkit-transform:translateX(-280px);
-moz-transform:translateX(-280px);
-ms-transform:translateX(-280px);
-o-transform:translateX(-280px);
transform:translateX(-280px);
}
.menu li:nth-child(3):hover ~ li:last-child {
-webkit-transform:translateX(-185px) !important;
-moz-transform:translateX(-185px) !important;
-ms-transform:translateX(-185px) !important;
-o-transform:translateX(-185px) !important;
transform:translateX(-185px) !important;
}
.menu li:nth-child(3).selected ~ li:last-child {
-webkit-transform:translateX(-185px);
-moz-transform:translateX(-185px);
-ms-transform:translateX(-185px);
-o-transform:translateX(-185px);
transform:translateX(-185px);
}
.menu li:nth-child(4):hover ~ li:last-child {
-webkit-transform:translateX(-90px) !important;
-moz-transform:translateX(-90px) !important;
-ms-transform:translateX(-90px) !important;
-o-transform:translateX(-90px) !important;
transform:translateX(-90px) !important;
}
.menu li:nth-child(4).selected ~ li:last-child {
-webkit-transform:translateX(-90px);
-moz-transform:translateX(-90px);
-ms-transform:translateX(-90px);
-o-transform:translateX(-90px);
transform:translateX(-90px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="menubox">
<ul class="menu">
<li class="selected">
<a href="#">
First
</a>
</li>
<li>
<a href="#">
Second
</a>
</li>
<li>
<a href="#">
Third
</a>
</li>
<li>
<a href="#">
Forth
</a>
</li>
<li></li>
</ul>
</div>
</body>
</html>