求助：如何在文本前方添加border？当前border被应用于整个div

以下是几种可以实现仅在文本前方添加边框、避免边框应用到整个容器的方案：

方案一：使用CSS伪元素（适合单行/固定高度文本） #

通过伪元素生成独立的边框线条，精准定位在文本左侧：

.text-leading-border {
  position: relative;
  padding-left: 20px; /* 为边框预留空间，避免遮挡文本 */
}

.text-leading-border::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; /* 边框宽度 */
  height: 1.2em; /* 匹配文本行高，可根据需求调整 */
  background-color: #2c3e50; /* 边框颜色 */
}

方案二：针对多行文本的包裹式左侧边框 #

如果需要给多行文本的左侧添加边框，同时让边框仅贴合文本高度而非整个容器，可修改元素的显示模式：

.multiline-text-border {
  border-left: 3px solid #2c3e50;
  padding-left: 15px;
  display: inline-block; /* 让边框仅包裹文本内容区域 */
  /* 若需要文本换行后仍保持边框，可添加：
  line-height: 1.6;
  max-width: 100%; */
}

方案三：仅给段落首行添加左侧边框 #

如果需求是仅在文本的第一行前方添加边框，可使用:first-line伪元素：

.para-first-line-border::first-line {
  border-left: 3px solid #2c3e50;
  padding-left: 10px;
}

你可以根据实际的文本布局（单行/多行、首行需求）选择对应的方案，调整边框的宽度、颜色和间距参数即可匹配示例效果。

内容的提问来源于stack exchange，提问作者jagjeet kumar