Question

我的问题建立在this question之上。就像abelenky一样，我想使用 CSS only 在HTML元素前面插入文本。马塞尔·杰克威特的回答很完美，但是，我需要额外的东西。插入文本时，我希望元素像列表一样缩进：

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插入的文本而不是项目符号点（＆＃34; Joe的任务＆＃34;例如）。我怎样才能达到这样的效果？

注意：我尝试使用列表删除项目符号样式并使用以下内容添加文本：here之前，但是：样式之前的文本只与文本的其余部分一起流动。

Answer 1

您可以使用flex来实现此目的，然后根据需要简单地调整伪元素的边距和/或宽度：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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>

用css插入文本，缩进文本的其余部分，如list

2 个答案: