[分享]css中导航栏两边的竖线

CSS中的导航栏是一个常见的网页设计元素，通过一些CSS技巧，我们可以给导航栏添加一些装饰性的元素，比如两边的竖线。.nav { display: flex; liststyle: none; mar...

CSS中的导航栏是一个常见的网页设计元素，通过一些CSS技巧，我们可以给导航栏添加一些装饰性的元素，比如两边的竖线。

.nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid #ccc;
  border-right: 2px solid #ccc;
}

.nav li {
  flex: 1;
  text-align: center;
  position: relative;
}

.nav li:before, .nav li:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ccc;
}

.nav li:before {
  left: -2px;
}

.nav li:after {
  right: -2px;
} 

首先，我们需要给导航栏添加一个左边和右边的边框，这样可以为后面的竖线留出空间。我们可以使用border-left和border-right属性来添加这两个边框。

接下来，我们需要在每个导航栏选项的左右两边添加竖线。这里我们使用::before和::after伪元素来实现。这两个伪元素分别表示在选项的前面和后面添加内容。

竖线的样式很简单，只需要设置宽度、颜色和位置即可。在样式中，我们将竖线设置为两像素宽的灰色，位置分别设置为选项的左侧和右侧。另外，由于竖线是绝对定位的，我们还需要把选项的position属性设为relative，这样才能让竖线相对于选项定位。

最后，我们就可以得到一个带有美观竖线装饰的导航栏了。这个技巧不仅适用于PC端网页，也可以用于响应式设计中的移动端导航栏。