如何在菜单项文本中间放置菜单项下划线

const menu = document.querySelector(".menu");
  const bord = document.querySelector(".border-bottom");

  var windowW = document.body.clientWidth / 2 - menu.children[0].offsetWidth / 2,
  bordW = 0,
  menuLinksW = 0, position = [0], temp = 1;

  menu.style.cssText = "transform: translateX(" + windowW + "px)";
  bord.style.cssText = "transform: translateX(" + (menu.children[0].offsetWidth / 2 - bord.offsetWidth / 2) + "px)";
  
  for(let i = 0; i < menu.children.length; i++){
    menu.children[i].addEventListener("click", function(){
      for(let i = 0; i < menu.children.length; i++){

        if(this == menu.children[i]){
          position[temp] = i;
          temp++;

          let v1 = position[position.length - 1];
          let v2 = position[position.length - 2];
          let n1 = v1 > v2 ? v1 : v2;
          let n2 = v1 < v2 ? v1 : v2;
          
          for(let ex = n2; ex < n1; ex++){
            windowW += v1 < v2 ? menu.children[ex].offsetWidth : (-menu.children[ex].offsetWidth);
            bordW += v1 > v2 ? menu.children[ex].offsetWidth : (-menu.children[ex].offsetWidth);

          }
          menu.style.cssText = "transform: translateX(" + windowW + "px)";
          bord.style.cssText = "transform: translateX(" + ((this.offsetWidth / 2) - bord.offsetWidth / 2 + bordW) + "px)";
        }
      }
    })
  }

*{
    box-sizing: border-box;
  }

  body{
    margin: 0;
    overflow-x: hidden;
  }

  .menu{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    transition: .5s;
  }

  .menu-link{
    position: relative;
    text-decoration: none;
    color: #000;
    font-family: consolas;
    padding: 12px 24px;
  }

  .menu-link:focus{
    color: red;
  }

  .border-bottom{
    position: absolute;
    width: 50px;
    height: 4px;
    background-color: black;
    transition: .5s;
    bottom: 0;
    left: 0;
  }

<div class="menu">
  <a href="#" class="menu-link active">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextTextText</a>
  <a href="#" class="menu-link">TextTextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextTextTextTextTextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextTextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <div class="border-bottom"></div>
</div>