Interruzione di riga (come <br>) utilizzando solo css

Question

È possibile in puro css, cioè senza aggiungere ulteriori tag html, per creare un'interruzione di riga come <br>? Voglio che l'interruzione di riga dopo l'elemento <h4>, ma non prima:

HTML

<li> 
    Text, text, text, text, text. <h4>Sub header</h4> 
    Text, text, text, text, text. 
</li> 

CSS

h4 { 
    display: inline; 
} 

ho trovato molte domande di questo tipo, ma sempre con risposte come "uso blocco di visualizzazione;", che non posso fare, quando lo <h4> deve rimanere sulla stessa linea.

Answer 1

Funziona così:

h4 { 
    display:inline; 
} 
h4:after { 
    content:"\a"; 
    white-space: pre; 
} 

Esempio: http://jsfiddle.net/Bb2d7/

Il trucco viene da qui: https://stackoverflow.com/a/66000/509752 (per avere maggiori spiegazioni)

Answer 2

Prova

h4{ display:block;} 

nel CSS

http://jsfiddle.net/ZrJP6/

Answer 3

È possibile utilizzare ::after per creare un blocco -altezza 0px dopo la <h4>, che si muove in modo efficace qualsiasi cosa dopo la <h4> alla riga successiva :

h4 { 
 
    display: inline; 
 
} 
 
h4::after { 
 
    content: ""; 
 
    display: block; 
 
}

<ul> 
 
    <li> 
 
    Text, text, text, text, text. <h4>Sub header</h4> 
 
    Text, text, text, text, text. 
 
    </li> 
 
</ul>