html - change border width on hover -

I have a list of links, and I want the bottom effect of the border or at the top of the link its width on the hover Change I tried to do this, but the width of the border change and the text increased up and down.

I want the text to be fixed and the border width should be changed behind the text!

  & lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; Div class = "first" & gt; First & lt; / Div & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; Div class = "second" & gt; Second & lt; / Div & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; 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 style: solid; Transition: Limit 1s ease; } Div.second {border-top-color: #aaa; Border-width: 2px; Border-top-style: solid; Transition: Limit 1s ease; } Div: Hover {boundary width: 30px; }  

Demo:

OK I fixed it by adding height Have done the div instead of the boundary, and increase the height of the hing and here

  one div {background-color: # 333; Height: 2px; Line-height: 30px; Transition: Ease of height 0.3 s; } A div: hover {height: 30px; }  

Thanks to all of you for help