<p class="underline">下划线_啊_下划线</p>
<div>
<input type="text" />
<span></span>
</div>
<style type="text/css">
.underline{
display: inline-block;
position: relative;
line-height: 2;
}
.underline::after{
content:'';
position: absolute;
left:0;
bottom:0;
transform: scaleX(0);
width: 100%;
height: 2px;
transform-origin: 50% bottom;
background: #1395ba;
transition: transform 1s;
}
.underline:hover::after{
transform: scaleX(1);
transition: transform 1s;
}
/* input下划线样式 */
div {
position: relative;
display: inline-block;
}
input {
outline: none;
border: none;
background: #fafafa;
}
input ~ span {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #1395ba;
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.3s ease-in-out;
}
input:focus ~ span {
transform: scaleX(1);
transform-origin: left center;
}
</style>
鼠标放上去的下划线
猜你喜欢
转载自blog.csdn.net/qq_35376043/article/details/99972277
今日推荐
周排行