![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bc949b01a52a79466f603a33c01b22e9.gif)
<div class="lineThrough">Hover me</div>
<style>
.lineThrough {
color: #1b202d;
text-decoration: none;
position: relative;
overflow: hidden;
display: inline-block;
cursor: pointer;
}
.lineThrough:after,
.lineThrough:before {
content: "";
position: absolute;
background: #5851ec;
left: 0;
width: 100%;
transition: transform .7s ease-in-out;
}
.lineThrough:before {
top: 50%;
height: 2px;
transform: translate3d(-101%, 0, 0);
}
.lineThrough:after {
top: 0;
height: 100%;
transform: translate3d(-100%, 0, 0) translate3d(-1px, 0, 0);
}
.lineThrough:hover:before {
transform: translateZ(0);
}
.lineThrough:hover:after {
transform: translate3d(100%, 0, 0) translate3d(1px, 0, 0);
}
</style>