Beispiel für die Implementierung von Unterstreichungseffekten mit CSS und JS

ul {
  Anzeige: Flex;
  Polsterung: 0;
  Rand: 0;
  Listenstiltyp: keiner;
}
ul:hover li:nicht(:hover) a {
  Deckkraft: 0,2;
}
ul li {
  Position: relativ;
  Polsterung: 30px 25px 30px 25px;
  Cursor: Zeiger;
}
ul li::nach {
  Position: absolut;
  Inhalt: "";
  oben: 100 %;
  links: 0;
  Breite: 100 %;
  Höhe: 2px;
  Hintergrund: #3498db;
  transformieren: scaleX(0);
  Übergang: 0,4 s kubisch-bézier (0,165, 0,84, 0,44, 1);
}
ul li:hover::nach, ul li.active::nach {
  transformieren: scaleX(1);
}

document.querySelectorAll('a').forEach(elem => {

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

    konstante Toleranz = 5;

    Konstante links = 0;
    const right = elem.clientWidth;

    lass x = e.pageX - elem.offsetLeft;

    wenn (x - Toleranz < links) x = links;
    wenn (x + Toleranz > rechts) x = rechts;

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

  };

});

A {
  Position: relativ;
  Schriftstärke: 600;
  Textdekoration: keine;
  Farbe: rgba(0, 0, 0, 0,4);
  Übergang: Farbe 0,3 s Leichtigkeit;
}
a::nach {
  --Skala: 0;
  Inhalt: '';
  Position: absolut;
  links: 0;
  rechts: 0;
  oben: 100 %;
  Höhe: 3px;
  Hintergrund: #4c81c9;
  -webkit-transform: MaßstabX(var(--scale));
          transformieren: scaleX(var(--scale));
  -webkit-transform-origin: var(--x) 50 %;
          Transform-Ursprung: var(--x) 50 %;
  Übergang: -webkit-transform 0,3 s cubic-bezier(0,535, 0,05, 0,355, 1);
  Übergang: Transformation 0,3 s kubisch-bézier (0,535, 0,05, 0,355, 1);
  Übergang: Transformiere 0,3 s kubisches Bézier(0,535, 0,05, 0,355, 1), -webkit-Transformiere 0,3 s kubisches Bézier(0,535, 0,05, 0,355, 1);
}
ein:schweben {
  Farbe: #4c81c9;
}
ein:hover::nach {
  --Skala: 1;
}