旁边导航文字在转换过程中不流畅

这个问题通常是由于CSS transition属性不够平滑导致的。为此，可以使用CSS transform属性来制作平滑动画，并在需要时添加CSS transition属性。例如：

.nav-item { position: relative; }

.nav-item::before { content: ""; position: absolute; top: 0; left: -50px; height: 100%; width: 0%; background-color: #333; transition: all 0.3s ease; }

.nav-item:hover::before { width: 100%; transform: translateX(50px); }

在这个示例中，我们使用CSS ::before伪元素和transform属性制作动画。当用户将鼠标悬停在.nav-item元素上时，“:: before”伪元素的宽度会从0％逐渐增加到100％，并使用translateX（）函数将其移动50像素。在需要时，我们添加了CSS transition属性，以使过渡更加平滑。

使用CSS transform属性和CSS transition属性结合的方法可以让旁边导航文字在转换过程中更加平滑流畅。