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