CSS と JS を使用して下線効果を実装する方法の例

ul {
  ディスプレイ: フレックス;
  パディング: 0;
  マージン: 0;
  リストスタイルタイプ: なし;
}
ul:hover li:not(:hover) {
  不透明度: 0.2;
}
ul li {
  位置: 相対的;
  パディング: 30px 25px 30px 25px;
  カーソル: ポインタ;
}
ul li::after {
  位置: 絶対;
  コンテンツ： "";
  上: 100%;
  左: 0;
  幅: 100%;
  高さ: 2px;
  背景: #3498db;
  変換: scaleX(0);
  遷移: 0.4秒 キュービックベジェ(0.165, 0.84, 0.44, 1);
}
ul li:hover::after、ul li.active::after {
  変換: scaleX(1);
}

document.querySelectorAll('a').forEach(要素 => {

  要素.onmouseenter =
  elem.onmouseleave = e => {

    定数許容値 = 5;

    定数左 = 0;
    const right = elem.clientWidth;

    x = e.pageX - elem.offsetLeft とします。

    (x - 許容値 < 左) の場合、x = 左;
    (x + 許容値 > 右) の場合、x = 右;

    elem.style.setProperty('--x', `${x}px`);

  };

});

{
  位置: 相対的;
  フォントの太さ: 600;
  テキスト装飾: なし;
  色: rgba(0, 0, 0, 0.4);
  トランジション: color .3s イーズ;
}
a::after {
  --スケール: 0;
  コンテンツ： '';
  位置: 絶対;
  左: 0;
  右: 0;
  上: 100%;
  高さ: 3px;
  背景: #4c81c9;
  -webkit-transform: scaleX(var(--scale));
          変換: scaleX(var(--scale));
  -webkit-transform-origin: var(--x) 50%;
          変換元: var(--x) 50%;
  遷移: -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
  遷移: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
  遷移: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
}
ホバー{
  色: #4c81c9;
}
ホバー後{
  --スケール: 1;
}