css滑动导航边框 |css浮动不换行

.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
border-bottom: 2px solid transparent;
}
.nav-item {
margin: 0 20px;
position: relative;
cursor: pointer;
font-size: 18px;
font-weight: 600;
}
.nav-item:before {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0%;
height: 2px;
background-color: #000;
transition: 0.3s ease-in-out;
}
.nav-item:hover:before {
width: 100%;
}

首先，创建一个具有导航功能的HTML菜单。将每个菜单项包装在一个带有类名“nav-item”的li元素中，再将所有这些项目包含在div或ul中，并将其命名为“nav”。

然后，在CSS样式表中设置.nav类来制定整个导航条的外观，例如宽度、高度、内边距和外边距。此外，使用弹性盒子布局属性 display: flex 来使整个导航条在水平方向上对齐居中，每个菜单项之间留出一定的间距，同时也可以设置所有文本大小、颜色和字体样式。

利用 “.nav-item:before”伪元素，通过设置 height 和 bottom 使下划线的位置距离文本底部一定的距离，以便形成类似于底部边框的效果。然后，将该伪元素的宽度设置为0，并设置它的过渡属性进行自然扩展。这意味着当大家将鼠标悬停在导航菜单项上时，边框线会慢慢扩展并变成黑色。

简而言之，这段CSS代码通过设置伪元素和过渡属性，增强了网站导航菜单的视觉体验，帮助用户更加自然地浏览网站内容。你也可以通过自定义属性来进一步与该功能进行互动。