CSS insert break after 4th child

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

Mortar

Answer 1

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

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

Unriddle

That doesn't add a break if you look at the demo – Mortar

it does not work for me in chrome, even after emptying my cache. – Badminton

@Badminton I see (Chrome 18). That's a bug, since the specification clearly says that pseudo-elements "interact with other boxes as if they were real elements inserted just inside their associated element.". Adding a "real" element with display block results in the expected lay-out: jsfiddle.net/M4aV3/9. File a bug report at new.crbug.com – Unriddle

Answer 2

You can also use a break character:

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

http://jsfiddle.net/00woyu28/

Lieutenancy