How can I create a hovering underline animation?

[webizito]

.header__menu-item span:hover::after{
    opacity: 1;
    bottom: -8px;
}

.header__menu-item span::after{
    opacity: 0;
    position: absolute;
    content: "";
    bottom: -15px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #2893ff;
    transition: all .2s;
    pointer-events: none;
}
.header__menu-item:hover span{
	display: block;
    position: relative;
    text-decoration: none;
    transition: .2s;
}
span.header__active-menu-item::after{
    opacity: 1;
    bottom: -8px;
    background-color: #ff6355;
}
.header__active-menu-item{
 	text-decoration: none;
 	text-underline-offset: unset;
 	display: block;
}

Repalce and add this css.