css3中的动画

Question

我刚刚创建了一个css3动画，我遇到了问题。 当我将鼠标悬停在文本上方时，上面显示一条线，所有内容都可能很棒，但我不知道如何在文本底部移动此行。 我尝试使用transform：translateX，但它没有帮助。

有我的代码：

.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

Answer 1

移动内的div一个像素到顶部，给它一个不透明的背景和从父DIV除去高度限制。

.line div{ 
    background:#fff; 
    position:relative; 
    bottom:1px; 
} 

Example