Salto de línea (me gusta) usando solo css


¿Es posible en css puro, es decir sin agregar etiquetas html adicionales, hacer un salto de línea como <br>? Quiero el salto de línea después del elemento <h4>, pero no antes:

HTML

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

CSS

h4 {
  display: inline;
}

He encontrado muchas preguntas como esta, pero siempre con respuestas como "use display: block;", que no puedo hacer, cuando el <h4> debe permanecer en la misma línea.

Author: Steeven, 2012-06-07

3 answers

Funciona así:

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

Ejemplo: http://jsfiddle.net/Bb2d7/

El truco viene de aquí: https://stackoverflow.com/a/66000/509752 (para tener más explicación)

 120
Author: adriantoine,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:25:36

Intenta

h4{ display:block;}

En tu css

Http://jsfiddle.net/ZrJP6 /

 4
Author: Philip Kirkbride,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-07 14:30:24

Puede utilizar ::after para crear un bloque 0px-height después de <h4>, que efectivamente mueve cualquier cosa después de <h4> a la siguiente línea:

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>
 2
Author: 0b10011,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-17 20:05:04