CSS：</p> <p><a href="http://jsfiddle.net/mfn5nefb/6/" rel="nofollow">http://jsfiddle.net/mfn5nefb/6/</a></p> <p>が、テキスト<code>input</code>のための：のようなトランジションエフェクトを作成するために、どのようにテキスト入力国境

Question

に影響を移行？

h1をinputに置き換えましたが、動作しません。あなたは（自動閉鎖要素である）入力要素に:afterのような擬似要素を使用することはできませんので、あなたがinputと同じことを行うためにHTMLの構造を変更する必要が

Answer 1

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>