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