Question

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>';
}

Answer 1

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

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