CSS: Transition effect on text input border - css

Question

How to create transition effect like:
http://jsfiddle.net/mfn5nefb/6/
but for text input?
I tried replace h1 with input but it does not work.

Answer 1

You have to change the HTML structure to do the same with input because you can't use pseudo elements like :after on an input element (which is an auto closing element)
HTML
<div id="input">
<input type="text" value="CSS IS AWESOME" /><span></span>
</div>
CSS
#input {
color: #666;
position: relative;
display: inline-block;
}
span {
position: absolute;
left: 50%;
content: '';
height: 40px;
height: 5px;
background: #f00;
transition: all 0.5s linear;
width: 0;
bottom: -5px;
}
input:hover ~ span {
width: 200px;
margin-left: -105px;
}
See this fiddle

Answer 2

.input_container{
display: inline-block;
text-align: center;
}
.awsome_input{
padding: 5px 10px;
border: none;
background: transparent;
display: block;
}
.awsome_input_border{
display:inline-block;
width:0px;
height: 2px;
background: #FEC938;
position: relative;
top:-5px;
-webkit-transition: all ease-in-out .15s;
-o-transition: all ease-in-out .15s;
transition: all ease-in-out .15s;
}
.awsome_input:hover,
.awsome_input:active,
.awsome_input:focus{
outline: none;
}
.awsome_input:hover+.awsome_input_border,
.awsome_input:active+.awsome_input_border,
.awsome_input:focus+.awsome_input_border{
width:100%;
}
<div class="input_container">
<input type="text" class="awsome_input"
placeholder="What do you think?"/>
<span class="awsome_input_border"/>
</div>