html - 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;
}

例子