请教OneDrive侧边栏li元素过渡效果的实现原理

近期我一直在研究OneDrive侧边栏中li元素间的流畅过渡效果，已知其使用了transition结合translateY，但不清楚具体实现逻辑，也不知道--leftNavIndicatorOffset变量如何更新，不确定是否纯CSS实现。

我观察到以下细节：

• 每个li元素都包含::before伪元素，作为hover状态下的边框
• 仅带有navLinkSelected_7c3aa882类的激活态li元素，才会有::after伪元素作为激活状态的边框

附上相关代码片段和效果动图，希望能有人解释该过渡效果的实现方式。

内容的提问来源于stack exchange，提问作者joaovitorfelix