change border width on hover - html

Question

I have a list of links, and I want the visual effect of the border at the bottom or the top of the link to change its width on hover. I tried to do that, but the width of border change and the text move up and down.
I want the text be fixed and border width change behind the text!
<ul>
<li>
<div class="first">first</div>
</li>
<li>
<div class="second">second</div>
</li>
</ul>
ul {
list-style-type:none;
background-color:#eee;
height:30px;
}
ul li {
display:inline-block;
margin-right: 5px;
height:30px;
}
div {
height:30px;
line-height:30px;
}
div.first {
border-bottom-color: #aaa;
border-bottom-width: 2px;
border-bottom-style: solid;
transition: border 1s ease;
}
div.second {
border-top-color: #aaa;
border-top-width: 2px;
border-top-style: solid;
transition: border 1s ease;
}
div:hover {
border-width:30px;
}
Demo:JSFiddle

Answer 1

ok i fixed it by adding height to the div instead of border, and increase the height on hover and here is the example on fiddle
a div {
background-color:#333;
height:2px;
line-height:30px;
transition: height 0.3s ease;
}
a div:hover {
height:30px;
}
Thank you all for help

Answer 2

Here's a fiidle:
http://jsfiddle.net/ym7tynws/2/
All you have to do now is work on z-index of the second tab.
CSS:
.nav {
list-style:none;
width:200px;
}
.nav li {
margin:0;
text-align:center;
width:50%;
display:block;
float:left;
position:relative;
}
.nav li a {
position:relative;
display:block;
padding:0;
cursor:pointer;
}
a .menu-link {
background-color:#eee;
height:30px;
line-height:30px;
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:#333;
transition: border 0.3s ease;
}
a div:hover {
border-bottom-width:30px;
}
.second {
height:30px;
line-height:30px;
position: relative;
background-color:#eee;
transition: height 0.3s ease;
}
.second:before{
background: #333;
height: 2px;
width: 100%;
position: absolute;
content: "";
display: inline-block;
left: 0;
}
.second:before {
top: 0;
}
.second:hover:before {
transition: height 0.3s ease;
height:30px;
}
HTML:
<ul class="nav">
<li>
<a><div class="menu-link">About</div></a>
</li>
<li>
<a><div class="second">Contact Us</div></a>
</li>

Answer 3

What you want isn't possible because the border itself occupies space in the document, it is part of the box model so it's height is taken into consideration. If you want changes in height to not affect the rest of the document you must remove the element from the normal document flow.
I'd suggest that you create a fake border using height on a pseudo-element and absolutely position it against the parent element, like this:
.first,
.second {
height:30px;
line-height:30px;
position: relative;
}
.first:after,
.second:before{
background: #aaa;
height: 2px;
width: 100%;
position: absolute;
content: "";
display: inline-block;
left: 0;
}
.first:after {
top: 100%;
}
.second:before {
top: 0;
}
.first:hover:after,
.second:hover:before {
height:30px;
}
Here's an update of your Fiddle:
http://jsfiddle.net/jkaL3a6m/
The other option would be to use the box-shadow property instead of border to create a fake 'border'.