css - 使内容出现在 :before pseudo selector? 下面

Question

我有一个元素

<div class="Test_then">The result is ...</div>

Test_then 类如下所示:

.Test_then::before {
  content: 'Then';
}

我的目标是让 (The result is ...) 出现在由 Test_then 类添加的 Then 内容下方。所以换句话说，会像这样呈现:

Then
The result is ...

Answer 1

如果您生成的内容仅包含行内单词“Then”，您可以使用 \a 添加一个换行符，并使用 white-space: pre-wrap (或 pre)使换行符呈现为实际的换行符:

.Test_then::before {
  content: 'Then\a';
  white-space: pre-wrap;
}

spec 中也提供了这方面的示例.

如果您生成的内容出于任何原因需要显示为 block ，那么它会变得更加简单——单独使用 display: block 将具有相同的效果:

.Test_then::before {
  content: 'Then';
  display: block;
}