如何避免换行后的段落文本出现在CSS ::before伪元素下方？

解决方案 #

问题本质是默认::before伪元素为行内元素，和正文文本处于同一行内流，换行后正文会默认顶到容器最左侧，不会自动预留序号的位置。可以通过容器预留左内边距+伪元素绝对定位的方式实现需求，修改后的CSS代码如下：

p {
  width: 200px;
  /* 左侧预留出序号的宽度，可根据实际序号长度调整数值 */
  padding-left: 1.5em;
  position: relative;
}

p::before {
  content: "1. ";
  position: absolute;
  /* 定位到容器左内边距的空白区域 */
  left: 0;
}

可选方案（Flex布局实现） #

也可以通过Flex布局实现，逻辑更直观，无需定位：

p {
  width: 200px;
  display: flex;
  gap: 0.5em;
}

p::before {
  content: "1. ";
  /* 禁止序号被压缩，确保始终完整展示 */
  flex-shrink: 0;
}

两种方案都可以实现换行后的正文始终在序号右侧对齐，不会跑到序号下方的效果。

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