[分享]css两点之间的连线

在CSS中，我们可以使用伪元素来创建两个元素之间的连线。具体来说，我们可以使用:before和:after两个伪元素来创建线。

 .line {
    position: relative;
  }
  .line:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    height: 1px;
    width: 10px;
    background-color: black;
  }
  .line:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    height: 1px;
    width: 10px;
    background-color: black;
  } 

在上面的代码中，我们首先给包含两个元素的容器添加了position: relative属性。这是为了让伪元素相对于该容器进行定位。

接下来，我们使用:before和:after伪元素来创建线。代码中，我们设置了伪元素的content属性为空，相当于没有元素内容，只是单纯的用来画线。

我们通过设置position: absolute将伪元素相对于容器进行绝对定位。然后，我们设置了top和left属性使伪元素相对于容器的左边和右边分别靠近50%位置。

我们设置了伪元素的高度和颜色，形成了一条细细的黑色线条，可以自行根据需求进行调整。

最后，我们的两个元素之间就通过这条线相互连接起来了！