CODEWITHSUNDEEP
htmlcssdomhtml-lists
jacktheripper
jacktheripper

Reputation: 14239

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

Upvotes: 8

Views: 8619

Answers (2)

Lauren
Lauren

Reputation: 255

You can also use a break character:

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

http://jsfiddle.net/00woyu28/

Upvotes: 4

Rob W
Rob W

Reputation: 349132

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

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

Upvotes: 15

Related Questions