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

Example