JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
    <a href="#" class="menu-item">One</a>
    <a href="#" class="menu-item">Two</a>
    <a href="#" class="menu-item">Three</a>
    <hr class="menu-line" />
</nav>

CSS

.menu {
    display: flex;
    flex-flow: row wrap;
}

.menu-item {
    flex: 1 0 33%;
    text-align: center;
    order: 2;
}

.menu-line {
    height: 1em;
    width: 100%;
    border: none;
    background-color: #ccc;
    background-image: 
        radial-gradient(circle at center, rgba(255,255,255,0), rgba(255,255,255,0) 62%, #fff 67%), 
        linear-gradient(90deg, #ccc, #888 50%, #ccc);
    background-size: 1em 1em, 33% 1em, 100%;
    background-position: 0 0, 0 0;
    background-repeat: repeat-x, no-repeat;
    transition: background-position .6s ease-in-out;
    order: 1;
}

.menu-item:nth-child(2):hover ~ .menu-line {
    background-position: 0 0, 50% 0;
}
.menu-item:nth-child(3):hover ~ .menu-line {
    background-position: 0 0, 100% 0;
}