html - 使用 CSS3 过渡

Question

有谁知道如何自动在我的文本下添加一行给所有人？ here is my animation

<div class="line"><div>behance.net</div>
</div>
<br>
<div class="line"><div>google.pl</div>
</div>
<br>
<div class="line"><div>twitter.com</div>
</div></br>

CSS

.line{
    font-family:Tahoma;
    width:0px;
    position: absolute;
    background:black;
    transition:width 0.4s ease ;
}

div:hover{
    position: absolute;
    width:86px;
}
.line div{
    background:#fff;
    position:relative;
    bottom:1px;
}

在第一个例子中，一切正常，线宽正常，但在其他情况下不正常。

Answer 1

你可以试试这个 - DEMO

HTML

<div class="line">behance.net <span></span></div> <br />
<div class="line">google.pl <span></span></div> <br />
<div class="line">twitter.com <span></span></div> <br />

CSS

.line {
    font: 400 1em Tahoma;
    margin: 5px;
    display: inline-block;
    overflow: hidden;
    padding: 2px 0;
    position: relative;
}

.line span {
    display: block;
    position: absolute;
    left: -90px;
    bottom: 1px;
    height: 1px;
    width: 100%;
    background: #c00;
    -webkit-transition: all .4s;
}

.line:hover span {
    left: 0;
}