Menu
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>';
}
886
A line-break can be added in HTML, using only CSS, by employing the pseudo-class ::after or ::before . In the stylesheet, we use these pseudo-classes, with the HTML class or id, before or after the place where we want to insert a line-break. In myClass::after : Set the content property to "\a" (the new-line character).
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
Definition and Usage The break-after property extends the CSS2 page-break-after property. Using break-after , you can tell the browser to break the page, column, or region after the element the break-after property is applied to, or avoid the element to be split and span across two pages.
There are two methods to force inline elements to add new line. Using display property: A block-level element starts on a new line, and takes up the entire width available to it. Using carriage return character (\A): We can add a new-line by using the ::before or ::after pseudo-elements.
Add a block-element after it: http://jsfiddle.net/M4aV3/1/
ul li:nth-child(4n):after {
content: ' ';
display: block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
