I just created an css3 animation and I have a problem. When I hover over my text, above appear a line and everything may have to be great, but I don't know how to move this line at the bottom of text. I've trying with transform:translateX but it does not help.

There is my code:

[http://jsfiddle.net/DashDesign/SD58Z/][1]

I just created an css3 animation and I have a problem. When I hover over my text, above appear a line and everything may have to be great, but I don't know how to move this line at the bottom of text. I've trying with transform:translateX but it does not help.

There is my code:

.line
{
font-family:Tahoma;
width:0px;
height:1px;
background:black;
transition:width 0.4s ease ;
-moz-transition: 0.4s ease ; /* Firefox 4 */
-webkit-transition: 0.4s ease ; /* Safari and Chrome */
-o-transition: 0.4s ease; /* Opera */

}

div:hover

{

width:85px;

}

http://jsfiddle.net/DashDesign/SD58Z/[1]