css实现两点一条线的效果

在网页设计中，有时候我们需要在两个不同的元素之间绘制一条线条来分隔它们。这时候，我们可以使用CSS来实现两点一条线的效果。

.line {
  position: relative;
}

.line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: black;
  transform: translateY(-50%);
}

首先，在包含两个元素的容器中添加一个类名为line的div，并给其设置position为relative。接下来，在这个div中使用伪元素before来绘制一条线，设置其position为absolute，top为50%，left为0，height为1px，width为100%，背景色为黑色。最后，使用transform将其上下平移50%的高度，使其处于元素中心位置。

使用以上代码即可实现两点一条线的效果。通过该方法，我们可以轻松地实现多种不同样式的分隔线，来美化网页。