如何使它在悬停之前也有下划线
a {
color: black;
position: relative;
cursor: pointer;
}
a:after {
border: none;
content: "";
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 1px;
background-color: black;
transition: width 0.5s;
}
a:hover:before {
border-bottom: 1px solid black;
}
a:hover:after {
border: none;
content: "";
width: 100%;
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 1px;
background-color: black;
transition: width 0.5s;
}
<a href='#'>Пример ссылки</a>
过渡动画是通过可变延迟完成的,使用transform和scaleX: