Elementor menu item underline – slide in and out effect

.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
    background-color: #ffffff;
}

.elementor-item {
    position: relative
}

.elementor-item:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    position: relative;
    left: 0;
    bottom: 2px;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .3s cubic-bezier(.85,.26,.17,1);
    opacity:1 !important;
}

.elementor-item:hover:after {
    transform: scaleX(1);
    transform-origin: 0 50%;
    transition: transform .4s cubic-bezier(.85,.26,.17,1)
}

.elementor-item:not(:hover):after {
    transform: scaleX(0);
    transform-origin: 50 0%;
    transition: transform .4s cubic-bezier(.85,.26,.17,1)
}S