CSS技术问询：如何在段落前添加线条？:before伪元素无效求解

嘿，我之前也踩过这个坑！想用:before给文本首行加线条却没效果，通常是几个容易忽略的细节没做到位，咱们一个个来解决：

1. 别忘了给伪元素加content属性 #

这是最常见的错误！浏览器只会渲染带有content属性的:before/:after伪元素，哪怕内容是空字符串也得加上：

/* 错误示例：缺少content，伪元素不会显示 */
.target-text:before {
  width: 20px;
  height: 1px;
  background: #666;
}

/* 正确示例：必须添加content */
.target-text:before {
  content: ''; /* 空内容也得写 */
  width: 20px;
  height: 1px;
  background: #666;
}

2. 调整伪元素的显示模式与定位 #

默认情况下，:before伪元素是display: inline，没法设置宽高，所以需要改成inline-block才能让线条显示出来；同时通过margin和vertical-align调整和首行文本的对齐方式：

.target-text:before {
  content: '';
  display: inline-block; /* 关键：让伪元素可以设置宽高 */
  width: 25px; /* 线条长度 */
  height: 1px; /* 线条粗细 */
  background-color: #333; /* 线条颜色 */
  margin-right: 10px; /* 和首行文本的间距 */
  vertical-align: middle; /* 和文本中线对齐，视觉更协调 */
}

3. 如果是「仅首行」显示线条（后续换行不加） #

如果你需要的是只有段落第一行开头有线条，而不是整个段落的每一行，那就得结合:first-line伪元素来实现：

.target-text:first-line:before {
  content: '';
  display: inline-block;
  width: 25px;
  height: 1px;
  background: #333;
  margin-right: 10px;
  vertical-align: middle;
}

⚠️ 注意：:first-line只能作用于块级元素，如果你的目标元素是span这类行内元素，需要先设置display: block或display: inline-block。

4. 排查其他可能的干扰因素 #

• 检查父元素是否设置了overflow: hidden，导致伪元素被截断；
• 如果伪元素被其他内容覆盖，可尝试添加z-index: 1（需要同时给伪元素设置position: relative）；
• 确认目标元素的选择器是否正确，别写错了类名或标签名。

试试上面的方法，应该就能解决你的问题啦！

内容的提问来源于stack exchange，提问作者L Coisser