位置関係(+幅)がわかっていればCSSでこういうこともできます。スクロール処理や幅の取得を JavaScriptで行えばそれっぽくできそうです。
HTML
1<div class="wrap">
2 <ul>
3 <li class="a">aaa</li>
4 <li class="b">bbbbbb</li>
5 <li class="c">ccc</li>
6 <li class="d">dddddd</li>
7 <li class="e">eee</li>
8 </ul>
9</div>
CSS
1.wrap {
2 position: relative;
3}
4ul {
5 list-style: none;
6 display: flex;
7 margin: 0;
8 padding: 0;
9 width: 30em;
10}
11li {
12 display: block;
13 flex-grow: 1;
14 text-align: center;
15}
16.e::after {
17 content: '';
18 display: block;
19 position: absolute;
20 width: 2.5em;
21 bottom: -.2em;
22 top: -.2em;
23 left: -3em;
24 background-color: #fff;
25 border-radius: .5em;
26 z-index: -1;
27 transition: all .5s ease-in-out 0s;
28}
29.a:hover ~ .e::after,
30.c:hover ~ .e::after,
31.e:hover::after { width: 2.5em; }
32.b:hover ~ .e::after,
33.d:hover ~ .e::after { width: 3.8em; }
34.a:hover ~ .e::after { left: 1.3em; }
35.b:hover ~ .e::after { left: 6.9em; }
36.c:hover ~ .e::after { left: 13.6em; }
37.d:hover ~ .e::after { left: 19.2em; }
38.e:hover::after { left: 26.0em; }
39```**動くサンプル:**[https://jsfiddle.net/3pfnushL/2/](https://jsfiddle.net/3pfnushL/2/)