Faire apparaître le contenu sous le pseudo-sélecteur: before?

Question

J'ai un élément

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

La classe Test_then ressemble à ceci:

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

Mon but est d'avoir le (The result is ...) apparaissent ci-dessous le contenu Then ajouté par la classe Test_then. Donc, en d'autres termes dans viderait comme ceci:

Then 
The result is ... 

Answer 1

Si votre contenu généré consiste simplement le mot « Alors » en ligne, vous pouvez simplement ajouter une nouvelle ligne avec \a et utiliser white-space: pre-wrap (ou pre) pour provoquer la saut de ligne pour rendre en tant que saut de ligne réelle:

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

un exemple de ceci est également prévu dans le spec.

Si votre contenu généré doit être affiché comme un bloc pour une raison quelconque, il devient encore plus simple - display: block seul aura le même effet:

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