在網頁設計中，導航欄是非常重要的一部分，因為它可以方便用戶快速定位到自己想要的內容。而為了讓導航條更加美觀和易于使用，我們可以通過添加豎線的方式來分割導航項。接下來我們就來介紹一下如何使用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代碼，希望對大家有所幫助。