Html 类似边框的转换会导致内容移动

标题大致概括了它，这里是一个演示和CSS到目前为止

.edit.input{
显示：内联块；
}
.编辑.输入{
边界：无；
边框底部：1px实心#d45；
}
.edit.input输入：焦点{
大纲：无；
边界：透明；
}
.酒吧{
显示：块；
}
酒吧：之后{
内容：''；
显示：块；
变换：scaleX（0）；
底部：-2px；
高度：2倍；
背景#48afb9；
过渡时间：300毫秒；
}
.edit.input输入：焦点~.栏：之后{
变换：scaleX（1）；
}

东西

其他内容

设置border:transparent时，将顶部的边框宽度重置为1

改为设置边框颜色

.edit.input{
显示：内联块；
}
.编辑.输入{
边界：无；
边框底部：1px实心#d45；
}
.edit.input输入：焦点{
大纲：无；
边框颜色：透明；/*已更改*/
}
.酒吧{
显示：块；
}
酒吧：之后{
内容：''；
显示：块；
变换：scaleX（0）；
底部：-2px；
高度：2倍；
背景#48afb9；
过渡时间：300毫秒；
}
.edit.input输入：焦点~.栏：之后{
变换：scaleX（1）；
}

东西

其他东西

试试这个代码

<style type="text/css">
    .edit.input {
        display: inline-block;
    }

    .edit.input input {
        border: none;
        border-bottom: 1px solid #F312FE;
    }

    .edit.input input:focus { /* virtual selecter */
        outline: none;
        border-color:transparent;
    }

    .bar:after {  /* virtual selecter */
        content: '';
        display: block;
        transform: scaleX(0); /* width * 0 */
        bottom: -2px;
        height: 2px;
        background: #48afb9;
        transition: 300ms ease all;
    }

    .edit.input input:focus ~ .bar:after {
        transform: scaleX(1); /* animation speed : 1 */
    }
}
</style>
<div class="edit input">
<input type="text">
    <div class="bar">
    </div>
</div>

.edit.input{
显示：内联块；
}
.编辑.输入{
边界：无；
边框底部：1px实心#F312FE；
}
.edit.input输入：焦点{/*虚拟选择器*/
大纲：无；
边框颜色：透明；
}
.bar:在{/*虚拟选择器之后*/
内容：''；
显示：块；
变换：scaleX（0）；/*宽度*0*/
底部：-2px；
高度：2倍；
背景#48afb9；
过渡时间：300毫秒；
}
.edit.input输入：焦点~.栏：之后{
变换：scaleX（1）；/*动画速度：1*/
}
}

就是这样！这对我来说绝对是一个“抓住你了”。谢谢