html - quitar - Salto de línea(como en español) usando solo CSS

salto de linea html

Question

¿Es posible en CSS puro, es decir, sin agregar etiquetas html adicionales, para 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;" , lo que no puedo hacer, cuando <h4> debe permanecer en la misma línea.

Answer 1

Funciona así:

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

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

El truco viene de aquí: https://.com/a/66000/509752 (para obtener más explicaciones)

Answer 2

Puede usar ::after para crear un bloque 0px -height después de <h4> , que efectivamente mueve cualquier cosa después de la <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>

Answer 3

Tratar

h4{ display:block;}

en tu css

http://jsfiddle.net/ZrJP6/