CSS para quebra de linha antes / depois de um item específico `bloco inline`

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>após o terceiro <li>. (Na verdade, fazer isso seria semanticamente e sintaticamente inválido.)

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

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

Também sei que esse caso em particular é possível usando em floatvez de inline-block, mas não estou interessado em soluções usando float. Eu também sei que com blocos de largura fixa isso é possível definindo a largura no pai ulcomo cerca de 3x essa largura; Não estou interessado nesta solução. Também sei que poderia usar display:table-cellse quisesse colunas reais; Não estou interessado nesta solução. Estou interessado na possibilidade de forçar uma quebra no conteúdo embutido.

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

Consegui fazê-lo funcionar em elementos LI embutidos. Infelizmente, ele não funciona se os elementos LI forem inline-block:

Demonstração ao vivo: http://jsfiddle.net/dWkdp/

Ou a versão do penhasco:

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

Você não está interessado em muitas "soluções" para o seu problema. Eu não acho que realmente exista uma boa maneira de fazer o que você quer fazer. Qualquer coisa que você insira usando :aftere contenttenha exatamente a mesma validade sintática e semântica que teria feito se você tivesse escrito nela mesmo.

As ferramentas CSS fornecem trabalho. Você deve apenas flutuar os lie clear: leftquando quiser iniciar uma nova linha, como você mencionou:

Veja um exemplo: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

Quando a reescrita do html é permitida, você pode aninhar <ul>s dentro do <ul>e apenas permitir que o interior seja <li>exibido como bloco embutido. Isso também semanticamente faria sentido no IMHO, pois o agrupamento também é refletido no html.

<ul>
    <li>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </li>
</ul>

li li { display:inline-block; }

Demo

$(function() { $('img').attr('src', 'http://phrogz.net/tmp/alphaball.png'); });

h3 {
  border-bottom: 1px solid #ccc;
  font-family: sans-serif;
  font-weight: bold;
}
ul {
  margin: 0.5em auto;
  list-style-type: none;
}
li li {
  text-align: center;
  display: inline-block;
  padding: 0.1em 1em;
}
img {
  width: 64px;
  display: block;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Features</h3>
<ul>
  <li>
    <ul>
      <li><img />Smells Good</li>
      <li><img />Tastes Great</li>
      <li><img />Delicious</li>
    </ul>
  </li>
  <li>
    <ul>
      <li><img />Wholesome</li>
      <li><img />Eats Children</li>
      <li><img />Yo' Mama</li>
    </ul>
  </li>
</ul>

Uma maneira fácil de dividir listas em linhas é flutuando os itens de lista individuais e, no item que você deseja ir para a próxima linha, você pode limpar o flutuador.

por exemplo

<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>

<li style="float: left; display: inline-block; clear: both"></li> --- this will start on a new line
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>

Eu sei que você não queria usar carros alegóricos e a pergunta era apenas teoria, mas caso alguém ache isso útil, aqui está uma solução usando carros alegóricos.

Adicione uma classe de esquerda aos seus lielementos que você deseja flutuar:

<li class="left"><img src="http://phrogz.net/tmp/alphaball.png">Smells Good</li>

e altere seu CSS da seguinte maneira:

li { text-align:center; float: left; clear: left; padding:0.1em 1em }
.left {float: left; clear: none;}

http://jsfiddle.net/chut319/xJ3pe/

Você não precisa especificar larguras ou blocos embutidos e funciona desde o IE6.

Consegui isso criando um seletor :: before para o primeiro elemento embutido na linha e transformando esse seletor em um bloco com uma margem superior ou inferior para separar um pouco as linhas.

.1st_item::before
{
  content:"";
  display:block;
  margin-top: 5px;
}

.1st_item
{
  color:orange;
  font-weight: bold;
  margin-right: 1em;
}

.2nd_item
{
  color: blue;
}

Observe que isso funcionará, dependendo de como você renderiza a página. Mas que tal começar uma nova lista não ordenada?

ie

<ul>
<li>
<li>
<li>
</ul>
<!-- start a new ul to line break it -->
<ul>

Uma solução melhor é usar -webkit-columns: 2;

http://jsfiddle.net/YMN7U/889/

 ul { margin:0.5em auto;
-webkit-columns:2;
}

Talvez seja completamente possível apenas com CSS, mas prefiro evitar "flutuar" o máximo possível, pois isso interfere na altura dos pais.

Se você estiver usando o jQuery, poderá criar um plugin `wrapN` simples que seja semelhante ao` wrapAll`, exceto que apenas envolve os elementos "N" e depois quebra e envolve os próximos elementos "N" usando um loop. Em seguida, defina sua classe de wrappers para `display: block;`.

(function ($) {
    $.fn.wrapN = function (wrapper, n, start) {
        if (wrapper === undefined || n === undefined) return false;
        if (start === undefined) start = 0;
        for (var i = start; i < $(this).size(); i += n)
           $(this).slice(i, i + n).wrapAll(wrapper);
        return this;
    };
}(jQuery));

$(document).ready(function () {
    $("li").wrapN("<span class='break' />", 3);
});

Aqui está um JSFiddle do produto final:

http://jsfiddle.net/dustinpoissant/L79ahLoz/