Insert CSS insert after 4th child

Question

This example currently shows an unordered list with 8 list items in it.

Is there a way to use only CSS (without HTML or JavaScript) to insert a gap after the 4th li element. Something like:

 ul li:nth-child(4n):after { content = '<br>'; } 

Answer 1

Add a block element after it: http://jsfiddle.net/M4aV3/1/

 ul li:nth-child(4n):after { content: ' '; display: block; } 

Answer 2

You can also use the interrupt character:

 li:nth-child(4n):after { content: '\a'; white-space: pre; } 

http://jsfiddle.net/00woyu28/