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

Answer 2

另一种标记较少的解决方案：

demo

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

CSS：

.line {
  display: inline-block;
  position: relative;
  background-position: -85px 0;
  transition: 1s;
  cursor: pointer;
}
.line:before {
  position: absolute;
  right: 0; top: 0; bottom: 0; left: 0;
  background: linear-gradient(0deg, crimson 1px, transparent 1px) no-repeat;
  background-position: inherit;
  background-size: 100% 100%;
  color: transparent;
  content: '';
}
.line:hover { background-position: 0 0; }

---

注意：

我的演示使用-prefix-free，它根据需要添加前缀。 WebKit 浏览器仍然需要 transitions 和 gradients 的前缀。您必须自己在代码中添加这些内容。当你这样做时，请记住总是把无前缀的放在最后！