Digamos que eu tenho esse HTML:

<h3>Features</h3>
<ul>
    <li><img src="alphaball.png">Smells Good</li>
    <li><img src="alphaball.png">Tastes Great</li>
    <li><img src="alphaball.png">Delicious</li>
    <li><img src="alphaball.png">Wholesome</li>
    <li><img src="alphaball.png">Eats Children</li>
    <li><img src="alphaball.png">Yo' Mama</li>
</ul>

e este CSS:

li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }

O resultado pode ser visto aqui:http://jsfiddle.net/YMN7U/1/

Agora imagine que eu quero dividir isso em três colunas, o equivalente a injetar um<br> depois do terceiro<li>. (Fazer isso seria semanticamente e sintaticamente inválido.)

Eu sei como selecionar o terceiro<li> em CSS, mas como forçar uma quebra de linha depois dela? Isso não funciona:

li:nth-child(4):after { content:"xxx"; display:block }

Eu também sei que esse caso em particular é possível usandofloat ao invés deinline-block, mas não estou interessado em soluções usandofloat. Eu também sei que com blocos de largura fixa isso é possível definindo a largura no paiul para cerca de 3x essa largura; Não estou interessado nesta solução. Eu também sei que eu poderia usardisplay:table-cell se eu quisesse colunas reais; Não estou interessado nesta solução. Estou interessado na possibilidade de forçar uma quebra no conteúdo embutido.

Editar: Para ser claro, estou interessado em "teoria", não na solução de um problema específico.O CSS pode injetar uma quebra de linha no meio dedisplay:inline(-block)? elementos, ou é impossível? Se você tem certeza de que é impossível, essa é uma resposta aceitável.