您可以使用CSS的伪元素选择器来实现响应式垂直分割线样式。以下是一种实现方式：
HTML代码：
<div class="container">
<div class="left">左侧内容</div>
<div class="divider"></div>
<div class="right">右侧内容</div>
</div>CSS代码：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.left, .right {
flex-basis: 50%;
}
.divider {
position: relative;
width: 1px;
height: 100%;
background-color: black;
}
.divider::before {
content: "";
position: absolute;
top: 0;
left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
}
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
.left, .right {
flex-basis: 100%;
}
.divider {
width: 100%;
height: 1px;
}
.divider::before {
top: -5px;
left: 0;
}
}解释：
首先，将包含左侧内容、分割线和右侧内容的容器设置为flex布局，并将主轴方向设置为水平居中对齐，交叉轴方向设置为垂直居中对齐。然后，将左侧和右侧内容的基础宽度设置为50%。接着，对于分割线，设置其宽度为1px，高度为100%，背景颜色为黑色，并使用伪元素选择器在分割线左侧创建一个小圆点。最后，通过@media查询，在窗口宽度小于等于768px时，将容器的主轴方向改为垂直居中对齐，交叉轴方向改为水平居中对齐，并将左侧和右侧内容的基础宽度设置为100%，同时将分割线的宽度设置为100%，高度设置为1px，并将小圆点的位置调整到分割线的上方。