Q:

CSS insert break after 4th child

Currently, this example shows an unordered list with 8 list items in it.
Is there a way using only CSS (no HTML or JavaScript) to insert a break after the 4th li item. Something like:
ul li:nth-child(4n):after {
    content = '<br>';
}

A:

Add a block-element after it: http://jsfiddle.net/M4aV3/1/
ul li:nth-child(4n):after {
    content: ' ';
    display: block;
}

A:

You can also use a break character:
li:nth-child(4n):after {
   content: '\a';
   white-space: pre;
}

http://jsfiddle.net/00woyu28/

