使用悬停：after将鼠标移开时，转换不起作用

Question

我创建了一个下划线，当鼠标移到元素上时，不透明度会进入，但不会消失，我希望当我将鼠标移开时，它的过渡也会消失。

.underline-hover-effect:after {
content: "";
position: absolute;
height: 2px;
opacity: 0;
bottom: -5px;
background-color: #6415ff;
transition: opacity 300ms ease;
}
.underline-hover-effect:hover::after {
width: 100%;
left: 0;
opacity: 1;
}

这只是不透明度过渡的结果，而不是过渡的结果

Answer 1

width在没有悬停时坍缩为零，因为您只在悬停状态下声明了它。

将left和width规则移动到非悬停选择器中，使其始终保持相同的大小和位置。

.underline-hover-effect {
position: relative;
}
.underline-hover-effect::after {
content: "";
position: absolute;
height: 2px;
opacity: 0;
bottom: -5px;
background-color: #6415ff;
transition: opacity 300ms ease;
width: 100%;
left: 0;
}
.underline-hover-effect:hover::after {
opacity: 1;
}

<div class="underline-hover-effect">hello</div>