Transitioning out doesn't work when moving mouse away using hover:after-CodePudding

I created an underline that opacity goes in but doesn't go out when moving out the mouse on the element and I want the transition of it going out as well when I hover away.

.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;
}

This just results of transitioning in the opacity but not transitioning out

CodePudding user response：

The width collapses to zero when you're not hovered because you've declared it only in the hover state.

Move the left and width rules into the non-hovered selector so it's always the same size and in the same place.

.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 >hello</div>