Saut de ligne (comme <br>) en utilisant uniquement du css

Question

Est-il possible, en css pur, c'est-à-dire sans ajouter de balises html supplémentaires, de faire un saut de ligne du type <br> ? Je veux que le saut de ligne après le <h4> mais pas avant :

HTML

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

CSS

h4 {
  display: inline;
}

J'ai trouvé de nombreuses questions de ce type, mais toujours avec des réponses du type "use display : block ;" ce que je ne peux pas faire, alors que l'option <h4> doivent rester sur la même ligne.

Answer 1

Cela fonctionne comme suit :

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

Exemple : http://jsfiddle.net/Bb2d7/

L'astuce vient d'ici : https://stackoverflow.com/a/66000/509752 (pour avoir plus d'explications)

Answer 2

Essayez

h4{ display:block;}

dans votre css

http://jsfiddle.net/ZrJP6/

Answer 3

Vous pouvez utiliser ::after pour créer un 0px -après le bloc <h4> ce qui a pour effet de déplacer tout ce qui se trouve après le <h4> à la ligne suivante :

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>

Answer 4

Je sais que je suis en retard pour la fête mais voici mes deux cents.

CSS

li h4 {
   break-after: always;
}

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