如何让 ::before 出现在 div 的每一行之前？

Question

我有一个 div 元素，它在

::before

上有一个 border-left。它在一条线上完美运行，但是当我换行时，

border-left

只覆盖第一行。我怎样才能将该行扩展到 div 元素的整个高度？我已经尝试过

height

但这似乎根本没有改变它。

#chatbox {
  background-color: lightgray;
  border: 1px solid gray;
  padding: 10px;
  height: 500px;
  width: 50%;
  overflow: wrap;
  word-wrap: break-word;
  border-radius: 5px;
  text-align: left;
}

#chatbox div {
  margin-bottom: 5px;
  border-radius: 5px;
  padding: 7px;
}

#chatbox div::before {
  content: '';
  margin-right: 7px;
  margin-left: 3px;
  border-left: 3px solid gray;
  height: 1230px;
}

<div id="chatbox">
<div>
qwerty: 562243835622438356224383562243835622438356224383562243835622438356224383562243835622438356224383
</div>
</div>

Answer 1

使 div 位置相对，使其保持在原来的位置，但成为“定位元素”，以便其子元素（

::before

元素）可以相对于它进行绝对定位。

使

::before

顶部和底部为 0，以便它换行到 div 大小。 向左添加以进行偏移。

#chatbox {
  background-color: lightgray;
  border: 1px solid gray;
  padding: 10px;
  height: 500px;
  width: 50%;
  overflow: wrap;
  word-wrap: break-word;
  border-radius: 5px;
  text-align: left;
}

#chatbox div {
  margin-bottom: 5px;
  border-radius: 5px;
  padding: 7px;
  position: relative;
}

#chatbox div::before {
  content: '';
  border-left: 3px solid gray;
  top:0;
  bottom:0;
  left:-3px; /* or any other offset */
  position: absolute;
  
}

<div id="chatbox">
<div>
qwerty: 562243835622438356224383562243835622438356224383562243835622438356224383562243835622438356224383
</div>
</div>

Answer 2

只需插入此代码行：

#chatbox div::before {
  float:left;
  //Other Codes...
}

#chatbox {
  background-color: lightgray;
  border: 1px solid gray;
  padding: 10px;
  height: 500px;
  width: 50%;
  overflow: wrap;
  word-wrap: break-word;
  border-radius: 5px;
  text-align: left;
}

#chatbox div {
  margin-bottom: 5px;
  border-radius: 5px;
  padding: 7px;
}

#chatbox div::before {
  content: '';
  margin-right: 7px;
  margin-left: 3px;
  border-left: 3px solid gray;
  height: 1230px;
  float:left;
}

<div id="chatbox">
<div>
qwerty: 562243835622438356224383562243835622438356224383562243835622438356224383562243835622438356224383
</div>
</div>