CSS 每行豎線圓連接是一種網頁設計中常用的樣式，在一些導航欄和分隔線中經常看到這種效果。

要實現每行豎線圓連接的效果，我們可以使用 CSS 中的偽元素和 border 屬性。以下是一個簡單的示例代碼：

ul {
list-style: none;
padding: 0;
}
li {
display: inline-block;
position: relative;
}
li:before {
content: '';
position: absolute;
left: -12px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #ccc;
}
li:first-child:before {
display: none;
}
li:after {
content: '';
position: absolute;
left: -6px;
top: 0;
bottom: 0;
width: 1px;
border-left: 1px solid #ccc;
}

代碼中的 ul 和 li 元素是一個簡單的導航欄示例。我們將 ul 的列表樣式去掉，并將 li 元素設置為 display: inline-block，以便對每個 li 元素進行樣式設置。

接下來，我們使用 li:before 和 li:after 偽元素來分別創建連接點和豎線。我們使用 content 屬性來給偽元素添加內容，并利用 position: absolute 和 left/top 屬性來將其定位在 li 元素的左側。

為了使連接點在列表的第一個元素上不顯示，我們使用 li:first-child:before 選擇器來將偽元素隱藏。

最后，我們使用 li:after 選擇器和 border-left 屬性來定義豎線的樣式。注意，我們將 left 屬性的值設為了 -6px，以便讓豎線與連接點對齊。

這樣，我們就可以輕松地實現 CSS 每行豎線圓連接效果了！