[分享]css两个点之间画多竖线

在CSS中，我们可以使用伪元素和背景图像来实现两个点之间画多竖线。

.line {
  position: relative;
  padding-left: 15px; /* 设定左内边距为15px以留出空间 */
}

.line::before {
  content: ';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: #ccc; /* 设定竖线的颜色 */
}

.line::after {
  content: ';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background-color: #ccc; /* 设定竖线的颜色 */
}

/* 可以根据需要设置竖线的粗细和长度 */ 

以上代码中，我们通过在要画竖线的父元素上设置相对定位，然后分别使用::before和::after伪元素来生成竖线。通过设定这两个伪元素的position为absolute，width为2px，然后设定一个合适的background-color，我们就可以生成一条竖线。

需要注意的是，因为竖线是通过伪元素重建的，所以我们需要在父元素上设置左内边距以留出空间，并且需要使用content: '来插入空内容进行重建。

总的说来，使用伪元素和背景图像来实现两个点之间画多竖线是一种很巧妙的方法。它不需要插入额外的HTML元素，而且兼容性好，在实现一些细节效果时非常实用。