第 4 个孩子之后的 CSS 插入中断

【问题标题】：CSS insert break after 4th child第 4 个孩子之后的 CSS 插入中断
【发布时间】：2012-04-18 02:45:47
【问题描述】：

目前，这个example 显示了一个包含 8 个列表项的无序列表。

有没有办法只使用 CSS（没有 HTML 或 JavaScript）在第 4 个 li 项目之后插入一个中断。比如：

ul li:nth-child(4n):after {
    content = '<br>';
}

【问题讨论】：

【解决方案1】：

在其后添加一个块元素：http://jsfiddle.net/M4aV3/1/

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

【讨论】：

如果你看演示，这不会增加中断
它在 chrome 中对我不起作用，即使在清空我的缓存之后也是如此。
@unludo 我明白了（Chrome 18）。这是一个错误，因为specification 明确表示伪元素“与其他框交互，就好像它们是插入相关元素中的真实元素一样。”。添加带有显示块的“真实”元素会产生预期的布局：jsfiddle.net/M4aV3/9。 在new.crbug.com提交错误报告

【解决方案2】：

你也可以使用换行符：

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

【讨论】：