For website

.underline-hover {
    position: relative;
    display: inline-block;
}

.underline-hover::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1); /* Line is visible initially */
    height: 2px;
    bottom: -7px; /* Space between text and underline */
    left: 0;
    background-color: #F0F2F4; /* Change this to your desired color */
    opacity: 0.25; /* Initial 25% opacity */
    transform-origin: bottom right;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.underline-hover:hover::after {
    transform: scaleX(1); /* Line slides into view */
    opacity: 1; /* Full opacity on hover */
    transform-origin: bottom left;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.underline-hover:hover::after {
    transform: scaleX(0); /* Line slides back when cursor is removed */
    opacity: 0.25; /* Reset opacity on hover out */
    transform-origin: bottom right;
}