Разрыв строки (например, <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;
}

Я нашел много таких вопросов, но всегда с ответами вроде "use display: block;", которые я не могу сделать, когда <h4> должен оставаться в одной строке.

Ответ 1

Он работает следующим образом:

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

Пример: http://jsfiddle.net/Bb2d7/

Трюк приходит отсюда: fooobar.com/questions/86340/... (чтобы получить больше объяснений)

Ответ 2

Попробуйте

h4{ display:block;}

в вашем css

http://jsfiddle.net/ZrJP6/

Ответ 3

Вы можете использовать ::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>