在CSS中，設計一個整潔的導航欄是非常重要的，而經典的方式是在導航欄兩側加上豎線。

.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布局來定位導航欄。我們設置了navbar類為display:flex和justify-content: space-between屬性，使導航欄位于容器的兩側。接下來，我們使用無序列表（ul）來設置導航鏈接，并使用list-style:none屬性將列表項的標記去除。

但是，在導航欄兩側添加豎線的關鍵是使用::before偽元素，在每個導航鏈接前添加一個單獨的偽元素。

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

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

通過使用上述CSS代碼，我們能夠輕松地為導航欄添加優雅的豎線，并設計出一個更專業的網站。