Digamos que tengo este 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>

y este CSS:

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

El resultado se puede ver aquí:http://jsfiddle.net/YMN7U/1/

Ahora imagine que quiero dividir esto en tres columnas, el equivalente a inyectar un<br> después del tercero<li>. (En realidad, hacer eso sería semántica y sintácticamente inválido).

Se como seleccionar el tercero<li> en CSS, pero ¿cómo forzo un salto de línea después? Esto no funciona:

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

También sé que este caso particular es posible usandofloat en lugar deinline-block, pero no me interesan las soluciones que usanfloat. También sé que con los bloques de ancho fijo esto es posible configurando el ancho en el padreul a aproximadamente 3 veces ese ancho; No estoy interesado en esta solución. También sé que podría usardisplay:table-cell si quisiera columnas reales; No estoy interesado en esta solución. Estoy interesado en la posibilidad de forzar un descanso dentro del contenido en línea.

Editar: Para ser claros, estoy interesado en la 'teoría', no en la solución a un problema en particular.¿Puede CSS inyectar un salto de línea en medio dedisplay:inline(-block)? elementos, o es imposible? Si está seguro de que es imposible, esa es una respuesta aceptable.