css大前端导航栏 |css伪类 画一条竖线

.nav {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #fff;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
height: 60px;
}
.nav-item {
margin-right: 20px;
position: relative;
}
.nav-link {
display: block;
padding: 0 10px;
font-size: 16px;
color: #333;
}
.nav-link:hover {
color: #f60;
}
.active::after {
content: "";
display: block;
background-color: #f60;
height: 3px;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
}

以上是一个基本的导航栏CSS样式。首先，大家使用flex布局将导航栏的子元素水平居中，并在每个导航项之间添加20像素的间距。导航栏的背景色为白色，带有灰色的阴影效果。每个导航项都有一个相对定位的父元素，它包含导航链接。导航链接使用16像素的字号和黑色的字体颜色，当鼠标悬停到链接上时，字体颜色将变为橙色。

在最后一个导航项上，大家添加了一个.active类，它是用来表示当前选中的导航项。.active类使用绝对定位将一个黄色的下划线添加在导航项下面。

通过在CSS中使用这些技巧和样式，你可以创建出漂亮、现代化的导航栏，为你的网站添加更多的价值和美感。