Witam, mam kod

[HTML] pobierz, plaintext 
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" aria-label="Second navbar example">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
 
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
 
            <div class="collapse navbar-collapse menu" id="links">
                <ul class="navbar-nav ms-auto menu" style="float: right">
                    <li class="nav-item menu-item active">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item menu-item">
                        <a class="nav-link" href="#">Zabawki</a>
                    </li>
                    <li class="nav-item menu-item">
                        <a class="nav-link" href="#">Bokserki</a>
                    </li>
                    <li class="nav-item menu-item">
                        <a class="nav-link" href="#">Staniki</a>
                    </li>
                    <li class="nav-item menu-item">
                        <a class="nav-link" href="#">Majtkit</a>
                    </li>
                    <li class="nav-item menu-item">
                        <a class="nav-link right" href="#">Zabawny</a>
                    </li>
                    <li class="element">
                        <a class="nav-link right" href="#">Chcialem być</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
[HTML] pobierz, plaintext 

a do tego CSS:

[CSS] pobierz, plaintext 
.navbar-nav .right::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: scaleX(0);
    transform-origin: left;
}
 
.navbar-nav .right:hover::before {
    width: 100%;
    transform: scaleX(1);
}
[CSS] pobierz, plaintext 

I ten element się podkreśla od lewej do prawej, a ja chcę stworzyć skrypt który będzie przesuwać podkreślenie jak w arkanoid od elementu aktywnego do zaznaczonego elementu. Podpowie mi ktoś jak uzyskać taki kod ?