CSS para salto de línea antes / después de un elemento particular de "bloque en línea"

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 de la tercera <li>. (En realidad, hacer eso sería semántica y sintácticamente inválido).

Sé cómo 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 usando en floatlugar de inline-block, pero no estoy interesado en las soluciones que usan float. También sé que con los bloques de ancho fijo esto es posible estableciendo el ancho en el padre ula aproximadamente 3 veces ese ancho; No estoy interesado en esta solución. También sé que podría usar display:table-cellsi 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 el medio de los display:inline(-block)?elementos, o es imposible? Si está seguro de que es imposible, esa es una respuesta aceptable.

He podido hacer que funcione en elementos LI en línea. Desafortunadamente, no funciona si los elementos LI son bloque en línea:

Demo en vivo: http://jsfiddle.net/dWkdp/

O la versión de las notas del acantilado:

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

No le interesan muchas "soluciones" a su problema. No creo que realmente haya una buena manera de hacer lo que quieres hacer. Todo lo que inserte usando :aftery contenttenga exactamente la misma validez sintáctica y semántica que hubiera hecho si lo hubiera escrito allí mismo.

Las herramientas CSS proporcionan trabajo. Simplemente debe flotar los lis y luego clear: leftcuando desee comenzar una nueva línea, como ha mencionado:

Vea un ejemplo: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

Cuando se permite reescribir el html, puede anidar <ul>s dentro del <ul>y simplemente dejar que el interior se <li>muestre como bloque en línea. Esto también tendría sentido semántico en mi humilde opinión, ya que la agrupación también se refleja en el 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; }

Manifestación

$(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>

Una manera fácil de dividir las listas en filas es flotando los elementos de la lista individual y luego el elemento que desea ir a la siguiente línea puede borrar el flotante.

por ejemplo

<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>

Sé que no querías usar flotadores y la pregunta era solo teoría, pero en caso de que alguien lo encuentre útil, aquí hay una solución con flotadores.

Agregue una clase de izquierda a sus lielementos que desea flotar:

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

y modifique su CSS de la siguiente manera:

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

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

No necesita especificar anchos o bloques en línea y funciona desde IE6.

Lo logré creando un selector :: before para el primer elemento en línea de la fila y convirtiendo ese selector en un bloque con un margen superior o inferior para separar un poco las filas.

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

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

.2nd_item
{
  color: blue;
}

Tenga en cuenta que esto funcionará, dependiendo de cómo renderice la página. Pero, ¿qué tal simplemente comenzar una nueva lista desordenada?

es decir

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

Una mejor solución es usar -webkit-columnas: 2;

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

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

Tal vez sea completamente posible solo con CSS, pero prefiero evitar "flotar" tanto como pueda porque interfiere con la altura de sus padres.

Si está utilizando jQuery, puede crear un simple complemento `wrapN` que sea similar a` wrapAll` excepto que solo envuelve elementos "N" y luego rompe y envuelve los siguientes elementos "N" usando un bucle. Luego configure su clase de envoltorios 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);
});

Aquí hay un JSFiddle del producto terminado:

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