<div class="d1"></div>
.d1 {
width: 50%;
height: 100px;
background: #eee;
user-select: none;
margin: 0 auto 50px auto;
position: relative;
}
.d1::after {
content: '';
border-bottom: 2px solid #107ed8;
width: 0;
position: absolute;
bottom: 0;
left: 100%;
transition: width .35s, left .35s;
}
.d1:hover::after {
left: 0;
width: 100%;
transition: width .35s;
}