使用 css 插入文本，缩进其余文本，如列表答案

【问题标题】：Insert text with css, indent rest of text like list使用 css 插入文本，缩进其余文本，如列表
【发布时间】：2018-01-24 20:09:28
【问题描述】：

我的问题建立在this question 之上。就像abelenky 一样，我想使用CSS only 在HTML 元素前面插入文本。 Marcel Jackwerth 的回答完美无缺，但是，我需要一些额外的东西。插入文本时，我希望元素像列表一样缩进：

Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。

想象一下，应该显示已插入 CSS 的文本而不是项目符号点（例如“Joe's Task”）。怎样才能达到这样的效果？

注意：我尝试通过删除项目符号样式并使用 :before 添加文本来使用列表，如 here 所述，但是 :before 样式中的文本仅与其余文本一起流动。

【问题讨论】：

所以要清楚，您想用文本替换项目符号吗？并保持缩进？
stackoverflow.com/questions/7698764/…
@TemaniAfif 是的，尽管它不必是一个列表。如果它不是一个列表，我实际上更喜欢它，所以我可以使用一个简单的 div 或其他东西。
@Paulie_D 那...很快。我仍在查看它，但这似乎解决了我的问题（以及 Temani Afif 的答案，因为我不想使用列表）。谢谢！
添加了不使用列表且具有动态对齐方式的答案。

标签： html css

【解决方案1】：

如果您可以将段落包装在容器中，那么您可以使用 CSS 表格管理 动态对齐

div {
  display: table border-collapse:separate;
  border-spacing: 1em;
}

p {
  display: table-row;
}

p::before {
  display: table-cell;
  padding-right: 1em;
}

.one:before {
  content: "Joe's\00A0task";
}

.two:before {
  content: "Michael's\00A0task";
}

.third:before {
  content: "Task";
}

<div>
  <p class="one">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p class="two">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p class="third">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

【讨论】：

考虑到我不必为 :before 文本设置宽度，这是一个更好的解决方案。现在，我为从 Temani Afif 手中夺走令人垂涎的绿色蜱虫而感到难过。 :(

【解决方案2】：

您可以使用 flex 来实现这一点，然后只需根据需要调整伪元素的边距和/或宽度：

p {
  display: flex;
}

.one:before {
  content: "Joe's\00A0task";
  margin-right: 15px;
}
.two:before {
  content: "Michael's\00A0task";
  margin-right: 5px;
}
.third:before {
  content: "Task";
  width:180px;
}

<p class="one">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="two">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="third">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

【讨论】：

无论您使用 CSS 插入什么文本，如果文本能够对齐，那就太好了。有什么方法可以为 CSS 文本设置固定宽度？除此之外，这是一个非常好的解决方案，并且已经对我有很大帮助。
@noClue 是的，如果需要，您可以在元素之前设置固定宽度；）
是的，我自己试了一下。完美的！太感谢了！你解决了我的一个主要问题。 -.-