使用以下代码,我可以实现从左到右的悬停下划线效果。
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: -5px;
background: #000;
height: 4px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
<p>hello, link is <a href="#" class="underline">underline</a>
</p>
当你不在悬停状态时,:after元素会回到左侧的初始状态。是否有任何方法,让:after在离开悬停状态时向右移动,而不是向左移动?