Tab移動で滑るハイライトメニュー

<nav class="d08-10-02-nav" aria-label="サイト内メニュー">
          <a class="d08-10-02-link" href="#">ホーム</a>
          <a class="d08-10-02-link" href="#">サービス</a>
          <a class="d08-10-02-link" href="#">料金</a>
          <a class="d08-10-02-link" href="#">お問い合わせ</a>
          <span class="d08-10-02-bar" aria-hidden="true"></span>
        </nav>

.d08-10-02-nav{position:relative;display:flex;flex-wrap:wrap;gap:20px;padding:14px 4px 12px}
        .d08-10-02-link{position:relative;color:#3a3d4a;text-decoration:none;font-size:13.5px;font-weight:600;padding-bottom:8px;outline:none;transition:color .2s}
        .d08-10-02-link.is-active{color:#6a5cff}
        .d08-10-02-bar{position:absolute;bottom:0;left:0;height:2.5px;width:0;background:linear-gradient(90deg,#6a5cff,#a44bff);border-radius:2px;transition:transform .3s cubic-bezier(.3,1,.4,1),width .3s,opacity .2s;opacity:0}
        .d08-10-02-bar.is-show{opacity:1}

(function(){
        var nav=document.querySelector('#item-08-10-02 .d08-10-02-nav');if(!nav)return;
        var bar=nav.querySelector('.d08-10-02-bar');
        var links=[].slice.call(nav.querySelectorAll('.d08-10-02-link'));
        links.forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();});});
        function move(link){
          bar.style.width=link.offsetWidth+'px';
          bar.style.transform='translateX('+link.offsetLeft+'px)';
          bar.classList.add('is-show');
          links.forEach(function(l){l.classList.toggle('is-active',l===link);});
        }
        nav.addEventListener('focusin',function(e){
          if(e.target.classList&&e.target.classList.contains('d08-10-02-link'))move(e.target);
        });
        nav.addEventListener('focusout',function(e){
          if(!nav.contains(e.relatedTarget)){
            bar.classList.remove('is-show');
            links.forEach(function(l){l.classList.remove('is-active');});
          }
        });
      })();