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

Let’s say I have this HTML:

<h3>Features</h3>
<ul>
    <li><img src="https://stackoverflow.com/questions/4609279/alphaball.png">Smells Good</li>
    <li><img src="https://stackoverflow.com/questions/4609279/alphaball.png">Tastes Great</li>
    <li><img src="https://stackoverflow.com/questions/4609279/alphaball.png">Delicious</li>
    <li><img src="https://stackoverflow.com/questions/4609279/alphaball.png">Wholesome</li>
    <li><img src="https://stackoverflow.com/questions/4609279/alphaball.png">Eats Children</li>
    <li><img src="https://stackoverflow.com/questions/4609279/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.