Line break (like <br>) using only css

Question

Is it possible in pure css, that is without adding additional html tags, to make a line break like <br>? I want the line break after the <h4> element, but not before:

HTML

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

CSS

h4 {   display: inline; } 

I have found many questions like this, but always with answers like "use display: block;", which I can't do, when the <h4> must stay on the same line.

Answer 1

It works like this:

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

Example: http://jsfiddle.net/Bb2d7/

The trick comes from here: https://stackoverflow.com/a/66000/509752 (to have more explanation)

Answer 2

Try

h4{ display:block;} 

in your css

http://jsfiddle.net/ZrJP6/