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中的伪元素: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%)向左移动自身宽度的一半，就可以实现竖线居中的效果。

文本框css画一条竖线且不影响文本框编写

可以使用CSS的伪元素来画一条竖线，同时不影响文本框的编写。下面是一个示例代码：

HTML:

<div class="textbox">
  <textarea></textarea>
</div>

CSS:

.textbox {
  position: relative;
  display: inline-block;
}

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

这段代码会在文本框左侧创建一条宽度为2px的黑色竖线。你可以根据需要自行调整竖线的样式和大小。