Q:

change border width on hover

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>
        <a href="#"><div class="first">first</div></a>
    </li>
    <li>
        <a href="#"><div class="second">second</div></a>
    </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 

A:

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

