Salto de línea (como <br>) 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 <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

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

\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

@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

@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

Tratar

h4{ display:block;}

en tu css

http://jsfiddle.net/ZrJP6/

— Philip Kirkbride
fuente

más un uso juicioso de margin-bottomdebería llevarlo allí.

— Jeremy Holovacs

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

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