在网页设计中，导航栏是非常重要的一部分，因为它可以方便用户快速定位到自己想要的内容。而为了让导航条更加美观和易于使用，我们可以通过添加竖线的方式来分割导航项。接下来我们就来介绍一下如何使用CSS为导航栏添加竖线样式。

.nav {
list-style:none;
display:flex;
justify-content:space-around;
align-items:center;
}
.nav li {
position:relative;
}
.nav li::after {
content:'';
position:absolute;
top:0;
bottom:0;
right:-5px;
width:1px;
background-color:#ccc;
}

首先，我们需要给导航栏添加一个CSS class，这里我们使用.nav。接下来，我们将其设置为flex布局，并使用justify-content:space-around和align-items:center两个属性来让导航项均匀分布，并在垂直方向上居中对齐。

然后，我们需要对每个导航项单独设置一个CSS class，这里我们使用.nav li。为了实现竖线效果，我们需要使用伪元素::after来为每个导航项添加一个竖线。需要注意的是，我们需要将导航项的position属性设置为relative，这样伪元素才能相对于其进行定位。

竖线的样式我们可以通过设置伪元素的content属性为空字符，再设置其为绝对定位，将其宽度设置为1个像素，背景色设置为灰色即可。为了使竖线可以靠近导航项，我们需要将其right属性设置为负值，这里我们使用5个像素。

以上就是为导航栏添加竖线样式的CSS代码，希望对大家有所帮助。