您可以使用CSS中的伪元素（:before, :after）和特定的样式来实现响应式水平分割线样式。以下是一个例子：
HTML代码片段：
<div class="divider"></div>CSS代码片段：
.divider {
position: relative;
border-top: 1px solid #ccc;
margin: 20px 0;
}
.divider:before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
border: 1px solid #ccc;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
}
.divider:after {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
border: 1px solid #ccc;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
}这段代码将创建一个带有水平分割线和圆点的容器。您可以通过更改border-top属性的值来调整水平线的粗细程度。您还可以更改border-radius属性的值来调整圆点的大小。通过在Media Query中使用不同的CSS属性值，您可以实现响应式分割线。