：before疑似セレクタの下にコンテンツを表示させるには？

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

あなたの生成されたコンテンツは、単に「その後」の単語のインライン構成されている場合、あなただけの\aに改行を追加し、white-space: pre-wrap（またはpre）を使用することができますが発生します実際の改行としてレンダリングするために改行：

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

本の例もspecで提供されています。

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