Розрив рядка (як <br>), використовуючи лише css

Чи можливо в чистому css, тобто без додавання додаткових тегів html, зробити розрив рядка як <br>? Я хочу розрив рядка після <h4>елемента, але не раніше:

HTML

<li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li>

CSS

h4 {
  display: inline;
}

Я знайшов багато подібних запитань, але завжди з відповіддю на зразок "використовувати дисплей: блок;" , що я не можу зробити, коли судно <h4>повинно залишатися на одній лінії.

Це працює так:

h4 {
    display:inline;
}
h4:after {
    content:"\a";
    white-space: pre;
}

Приклад: http://jsfiddle.net/Bb2d7/

Фокус походить звідси: https://stackoverflow.com/a/66000/509752 (щоб отримати додаткові пояснення)

Спробуйте

h4{ display:block;}

у вашому css

http://jsfiddle.net/ZrJP6/

Ви можете використовувати ::afterдля створення 0pxблоку -height після <h4>, який ефективно переміщує будь-що після символу <h4>в наступний рядок:

h4 {
  display: inline;
}
h4::after {
  content: "";
  display: block;
}

<ul>
  <li>
    Text, text, text, text, text. <h4>Sub header</h4>
    Text, text, text, text, text.
  </li>
</ul>