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 每行竖线圆连接效果了！