製作內容顯示在：僞選擇器之前？

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也提供了一個示例。

如果您生成的內容需要被顯示爲任何原因塊的話，那就更簡單 - display: block單獨將有同樣的效果：

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