css导航 有竖线怎么弄

CSS导航菜单是网页设计中不可或缺的元素之一，而菜单中的竖线常常用来分隔菜单项，使其更加美观清晰。在CSS中，实现竖线分隔可使用伪元素::before或::after来创建。下面我们就来看看如何使用CSS的伪元素来实现导航菜单中竖线分隔的效果。

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin-right: 20px;
  position: relative;
}

nav ul li:last-child {
  margin-right: 0;
}

nav ul li a {
  color: #333;
  text-decoration: none;
  padding: 10px;
}

nav ul li::before {
  content: '|';
  position: absolute;
  left: -10px;
  color: #bbb;
}

上述代码中，我们首先将导航菜单的布局设置为flex，并使用justify-content和align-items属性来让菜单项居中对齐。然后我们将ul的样式设置为flex，并去掉了默认的list-style，添加了margin和padding。再针对li元素设置相应的样式，包括右边距、position属性及:before伪元素。

在:before伪元素中，我们设置其内容为'|'，并将其定位在菜单项左侧10px处。同时，我们还设置了竖线的颜色为#bbb，以实现与菜单项文字颜色的区分。

用以上CSS代码来实现导航菜单中竖线分隔的效果，不仅可以更好地分隔菜单项，还能提升网页的美观度。你还可以根据需要自行调整样式，让菜单更加适配你的网页布局与风格。