css中导航中的竖条

CSS中的导航栏常常会使用一些特殊的效果，比如按钮下面的横条或者是下拉框中的三角形等等。其中，导航栏中的竖条也是非常常见的一种效果。它可以用来显示当前页面所属的导航项，方便用户在导航栏中快速找到自己所处的位置。

实现这个效果的方法非常简单，只需要使用CSS的伪元素before或者after就可以轻松实现。使用before或者after可以在元素的前面或者后面插入一个虚拟的元素，在这个虚拟元素中添加样式就可以达到很多有趣的效果。

下面是一个实现导航栏中竖条效果的CSS代码：

.nav-item {
  position: relative;
  display: inline-block;
}
.nav-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: #ff0000;
  display: none;
}
.nav-item.active:before {
  display: block;
} 

这段代码中，我们首先给导航项设置了position: relative，使得它的子元素可以根据它来定位。然后使用before在导航项的前面插入一个虚拟元素，设置它的宽度、高度、背景色等样式，使它看起来就像是一个竖条。需要注意的是，在默认情况下，这个虚拟元素是不显示的，需要通过设置.nav-item.active:before的display: block来让它显示出来。

最后，我们只需要在Javascript中获取当前页面所属的导航项，给它添加active类名，竖条就会自动显示出来了。