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

【问题标题】：Making content appear below the :before pseudo selector?使内容出现在 :before 伪选择器下方？
【发布时间】：2017-07-31 09:06:52
【问题描述】：

我有一个元素

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

Test_then 类如下所示：

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

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

Then
The result is ...

【问题讨论】：

【解决方案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;
}

【讨论】：