transition with css3 - html

Question

Does anybody know how to algin a line under my text automatically to all?
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;
}
In the first example, everything works fine, the width of line is ok, but in other no.

Answer 1

You can try this - 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

Another solution with less markup:
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; }
Note:
My demo uses -prefix-free which adds prefixes as needed. WebKit browsers still need prefixes for transitions and gradients. You'll have to add these yourself in your code. When you do, please remember to always put the unprefixed ones last!