在CSS中，設(shè)計一個整潔的導(dǎo)航欄是非常重要的，而經(jīng)典的方式是在導(dǎo)航欄兩側(cè)加上豎線。

.navbar {
display: flex;
justify-content: space-between;
}
.navbar ul {
display: flex;
list-style: none;
}
.navbar li {
margin: 0 10px;
position: relative;
}
.navbar li::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -8px;
border-left: 1px solid #ccc;
}

首先，我們需要使用Flexbox布局來定位導(dǎo)航欄。我們設(shè)置了navbar類為display:flex和justify-content: space-between屬性，使導(dǎo)航欄位于容器的兩側(cè)。接下來，我們使用無序列表（ul）來設(shè)置導(dǎo)航鏈接，并使用list-style:none屬性將列表項的標記去除。

但是，在導(dǎo)航欄兩側(cè)添加豎線的關(guān)鍵是使用::before偽元素，在每個導(dǎo)航鏈接前添加一個單獨的偽元素。

在上述代碼中，我們首先定位每個導(dǎo)航鏈接（li元素）的位置，然后使用position: relative為子元素設(shè)置相對定位。接下來，使用::before偽元素并設(shè)置content屬性為空來創(chuàng)建每個鏈接前面的豎線。我們將其定位在每個鏈接的左側(cè) -8像素處，因此鏈接本身被實際推到了右側(cè)。

最后，我們設(shè)置偽元素的高度為100%（top: 0和bottom: 0），并添加1像素的實線邊框（border-left: 1px solid #ccc），以創(chuàng)建鏈接兩側(cè)的豎線。

通過使用上述CSS代碼，我們能夠輕松地為導(dǎo)航欄添加優(yōu)雅的豎線，并設(shè)計出一個更專業(yè)的網(wǎng)站。