使内容出现在：before伪选择器之下？

Question

我有一个元素

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

Test_then类看起来像这样：

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

我的目标是让The result is ...显示在Then类添加的Test_then内容下方。所以换句话说就像这样渲染：

Then
The result is ...

Answer 1

如果您生成的内容只包含单词＆＃34;那么＆＃34;内联，您只需使用\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;
}