html - CSS3中的动画

我刚创建了一个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

最佳答案

将内部div移至顶部一个像素，为其提供不透明的背景，并取消父div的高度限制。

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

Example

关于html - CSS3中的动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15494065/