如何用纯CSS实现前置文本插入及HTML元素列表式缩进？

嘿，我完全懂你的困扰——用:before插入文本后，默认和正文挤在一行，没法像列表那样有自然的缩进感。其实只需要调整伪元素的定位逻辑和父元素的内边距就能搞定，给你两种实用的方案：

方案一：绝对定位+内边距预留空间 #

这是最稳妥的方法，通过给父元素设置左侧内边距把正文挤到右侧，再用绝对定位把插入文本固定在左边预留的位置里：

HTML 示例 #

<div class="task">完成项目文档的收尾工作</div>
<div class="task">跟进客户反馈的修改需求</div>

CSS 代码 #

.task {
  /* 给左侧插入的文本预留足够空间，数值根据你的文本长度调整 */
  padding-left: 80px;
  /* 让伪元素的绝对定位相对于当前元素 */
  position: relative;
  /* 可选：增加行高让文本垂直居中 */
  line-height: 1.5;
  margin: 8px 0;
}

.task:before {
  /* 插入你需要的文本 */
  content: "Joe's Task";
  /* 绝对定位到父元素的左上角 */
  position: absolute;
  left: 0;
  top: 0;
  /* 可选：给插入的文本加样式，比如加粗、不同颜色 */
  font-weight: bold;
  color: #2c3e50;
}

这个方案的优势是插入的文本不会干扰正文排版，正文始终保持在预留的内边距右侧，完美模拟列表的缩进效果。

方案二：浮动+固定宽度 #

如果你不想用绝对定位，也可以用浮动来实现：

CSS 代码 #

.task {
  /* 清除浮动，避免影响后续元素 */
  overflow: hidden;
  margin: 8px 0;
  line-height: 1.5;
}

.task:before {
  content: "Joe's Task";
  /* 左浮动，让正文绕到右侧 */
  float: left;
  /* 给插入的文本设置固定宽度，确保正文有统一的缩进 */
  width: 70px;
  font-weight: bold;
  color: #2c3e50;
}

这种方式不需要设置内边距，通过浮动把插入文本“推”到左边，正文自然形成缩进。需要注意给伪元素设置合适的宽度，避免文本过长换行影响排版。

为什么之前的方法没效果？ #

默认情况下，:before伪元素的display属性是inline，所以会和正文内容在同一行内排列，不会触发缩进。上面两种方法都是通过改变伪元素的定位方式（绝对定位/浮动），或者给父元素预留空间，让插入文本和正文视觉上分开，实现类列表的效果。

你可以根据自己的布局需求选其中一种，两种都能完美解决你的问题~

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