Salto de línea (como <br>) usando solo css

84

¿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 <h4>elemento, 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>deben permanecer en la misma línea.

html css styling Steeven
fuente
¿Por qué este elemento es un h4? ¿Por qué lo usas en un lugar como este?
toniedzwiedz
Nuestra curiosidad, ¿cuál es la razón por la que no desea utilizar <br/>?
Philip Kirkbride
1
La razón: tengo una gran cantidad de elementos de lista. Y también me preguntaba si existe una solución elegante. Por lo general, no es bueno usar etiquetas br entre elementos (y veo el encabezado como un elemento propio)
Steeven
@Tom, este es un ejemplo simplificado. Tengo algunos textos y encabezados en cada elemento de la lista.
Steeven
posible duplicado de Cómo insertar un salto de línea antes de un elemento usando CSS
usuario

Respuestas:

134

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)

adriantoína
fuente
10
\asignifica salto de línea, carácter U + 000A, y white-space: prele dice a los navegadores que lo traten como un salto de línea en el renderizado.
Jukka K. Korpela
Bien, gracias @ JukkaK.Korpela. Entonces, ¿por qué no se representa como un salto de línea en primer lugar? Aunque esta solución es simple, anularía otros comandos de espacios en blanco.
Steeven
3
@Steeven, solo anula el valor inicial white-spacedel :afterpseudoelemento, que contiene solo el salto de línea. Y es necesario porque en HTML, por defecto, un salto de línea en el contenido del elemento es equivalente a un espacio y no causa un salto de línea en el documento renderizado.
Jukka K. Korpela
3
@Alshten, gracias, tiene sentido y me desconcierta totalmente al mismo tiempo.
sonjz
Nunca hubiera pensado en esto. ¡Es una pena que no se pueda insertar HTML!
Lodewijk
7

Tratar 

h4{ display:block;}

en tu css

http://jsfiddle.net/ZrJP6/

Philip Kirkbride
fuente
1
más un uso juicioso de margin-bottomdebería llevarlo allí.
Jeremy Holovacs
4
Pero si entiendo bien, el h4 tiene que estar en la misma línea que el texto anterior. Con display: block, hay un salto de línea antes de h4.
Adriantoine
¿Qué? margin-bottompondrá h4 en la misma línea que el texto anterior?
Steeven
!! Esta no es una solución que funcione: su línea después será "display: none" en navegadores como Safari.
Gregdebrick
5

Puede usar ::afterpara crear un 0pxbloque -height después de <h4>, que efectivamente mueve cualquier cosa después <h4>de 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>
Expandir fragmento

0b10011
fuente