使内容出现在 :before 伪选择器下方？

Question

我有一个元素

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

Test_then class 看起来像这样：

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

我的目标是让 (The result is ...) 显示在 Test_then class 添加的 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.

中也提供了这方面的示例

如果您生成的内容由于任何原因需要显示为一个块，那么它就变得更加简单——单独 display: block 将具有相同的效果：

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