HTML在div左侧画一条竖线

可以使用CSS中的伪元素:before来实现在div左侧画一条竖线的效果。

HTML代码：

<div class="container">
  <p>这是一个 div。</p>
</div>

CSS代码：

.container {
  position: relative;
  padding-left: 10px;
}

.container:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: black;
}

其中，通过设置.container的position属性为relative，使得伪元素:before可以相对于它进行定位。然后通过设置padding-left属性为10px，使得div的内容不会与竖线重叠。最后通过:before伪元素设置left为0，top为0，width为1px，height为100%来绘制竖线，并设置背景色为黑色。

相关问题

如何在div中间画一条横线

可以使用CSS中的border属性来在div中间画一条横线。具体做法如下：

1. 在HTML中添加一个div元素，比如：

<div class="line"></div>

2. 在CSS中设置这个元素的样式，给它设置一个边框，并且只设置上边框，颜色和宽度可根据需求进行调整，如下所示：

.line {
   border-top: 1px solid black;
}

这样就能在div中间画一条横线了。需要注意的是，如果父元素没有设置高度，那么这条横线可能会撑开父元素，因此需要在父元素中设置overflow属性来防止横线撑开父元素，如下所示：

.parent {
   overflow: hidden;
}

其中overflow属性可用来防止横线撑开父元素。

前端怎么在两个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%)向左移动自身宽度的一半，就可以实现竖线居中的效果。