前端怎么在两个div中间画一根竖线

可以通过CSS中的伪元素:before或:after来实现在两个div中间画一根竖线的效果。具体实现方法如下：

HTML代码：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS代码：

.container {
  position: relative;
}

.left {
  width: 50%;
  height: 100px;
  background-color: #f2f2f2;
  float: left;
}

.right {
  width: 50%;
  height: 100px;
  background-color: #ccc;
  float: left;
}

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

解释说明：

首先，将两个div分别设置为左右浮动，并设置宽度为50%。

然后，在左侧的div上使用:before伪元素添加一条竖线，将其定位到div中央，设置高度为100%（即与父级div高度相等），宽度为1px，背景颜色为黑色。

最后，将父级div容器设置为相对定位，这样在绝对定位的:before伪元素中，left:50%就是相对于父级div容器向右偏移50%的距离，再通过transform:translateX(-50%)向左移动自身宽度的一半，就可以实现竖线居中的效果。