I recently came across this effect on a website and thought it was interesting and simple to implement. It resembles the link hover effect I was already using. Since you have greater control of the animation timing, this could be used in a lot of scenarios.
Hover Over Me
.hover-effect{
position:relative;
isolation:isolate;
max-width:max-content;
cursor:pointer;
}
.hover-effect::before{
content:"";
position:absolute;
width:104%;
left:50%;
bottom:-2px;
height:4px;
background-color:gold;
transform: translatex(-50%);
transition: height .8s;
z-index: -1
}
.hover-effect:hover::before,,.hover-effect:focus::before.hover-effect:focus-within::before{
height:104%;
}