当输入集中时，我试图获得下划线效果（->从左到右）
我看到了很多可以实现的“技巧”。
但是我想知道实现这一目标的最有效方法是什么？
（明智地支持浏览器和语法）
谢谢。
.input{
position: relative;
display: inline-block;
overflow: hidden;
}
.input > .txt-underline{
border: none;
outline: none;
}
.underline{
transition: all 0.5s;
display: inline-block;
bottom: 0;
left: -100%;
position: absolute;
width: 100%;
height: 2px;
background-color: #f00;
}
.input > .txt-underline:focus + .underline{
left: 0;
}<div class="input">
<input type="text" class="txt-underline" placeholder="Please Enter Name">
<span class="underline"></span>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句