如何让div的::before伪元素左侧边框覆盖元素全部高度？

你的问题出在**::before伪元素的默认显示模式**上——它默认是inline元素，inline元素的height设置不生效，而且只会和文本第一行对齐，所以内容换行后边框只显示在第一行。下面提供两种可行的解决方法：

方案1：绝对定位（适配自适应高度，推荐） #

给父元素设置相对定位，让伪元素通过绝对定位铺满父元素的整个高度：

#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; /* 添加相对定位，作为伪元素的定位基准 */
  padding-left: 13px; /* 调整内边距，避免文本和边框重叠 */
}

#chatbox div::before {
  content: '';
  position: absolute; /* 绝对定位 */
  left: 7px; /* 对应原margin-left的位置 */
  top: 0;
  bottom: 0; /* 上下贴紧父元素，自动铺满高度 */
  border-left: 3px solid gray;
}

方案2：Flex布局 #

将父元素设为flex容器，伪元素作为flex项自动拉伸至父元素高度：

#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;
  display: flex; /* 设置为flex容器 */
  align-items: flex-start; /* 保持文本顶部对齐 */
}

#chatbox div::before {
  content: '';
  margin-right: 7px;
  margin-left: 3px;
  border-left: 3px solid gray;
  margin-top: 7px; /* 对应父元素的padding-top，调整垂直对齐 */
}

内容的提问来源于stack exchange，提问作者12944qwerty