CSS to line break before/after a particular `inline-block` item

Question

Let's say I have this 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>

and this CSS:

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

The result can be seen here: http://jsfiddle.net/YMN7U/1/

Now imagine that I want to break this into three columns, the equivalent of injecting a <br> after the third <li>. (Actually doing that would be semantically and syntactically invalid.)

I know how to select the third <li> in CSS, but how do I force a line break after it? This does not work:

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

I also know that this particular case is possible by using float instead of inline-block, but I am not interested in solutions using float. I also know that with fixed-width blocks this is possible by setting the width on the parent ul to about 3x that width; I am not interested in this solution. I also know that I could use display:table-cell if I wanted real columns; I am not interested in this solution. I am interested in the possibility of forcing a break inside inline content.

Edit: To be clear, I am interested in 'theory', not the solution to a particular problem. Can CSS inject a line break in the middle of display:inline(-block)? elements, or is it impossible? If you are certain that it is impossible, that is an acceptable answer.

Answer 1

I've been able to make it work on inline LI elements. Unfortunately, it does not work if the LI elements are inline-block:

Live demo: http://jsfiddle.net/dWkdp/

Or the cliff notes version:

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "\A";
     white-space: pre; 
}