特效一览
划线动态:
动态边框:
划线动态
效果图
原理和代码
:before
和 :after
伪元素指定了一个元素文档树内容之前和之后的内容。由于input
标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。
<div>
<input type="text" />
<span></span>
</div>
包裹在外的父元素div
应该设置成inline-block
,否则宽度会满屏。
div {
position: relative;
display: inline-block;
}
input
标签需要禁用默认样式:
input