soy Kseso y esto EsCSS

Loco elemento: block para su precedente, inline para lo siguiente

Cómo hacer cn Css que un elemento "inline" se comporte como de bloque para lo que le precede y así pase a la línea siguiente y mantenga su naturaleza de "en línea" para lo que le sigue (se posicione en su mismo renglón). Sin usar br, claro.

Loco elemento: block para su precedente, inline para lo siguiente

·Por Kseso ✎ 2

Pongámonos en situación: tienes una serie de elementos inline dentro de otro de bloque, como acrónimos abbr dentro de un párrafo. Elementos que aparecerán aleatoriamente. Y deseas que cada vez que aparezca uno de ellos pase a la línea siguiente (que cree un salto de línea antes de él). Y a la vez todo lo que le siga esté en su línea.

Dicho de otra forma: que se comporte como elemento de bloque para lo que le precede y de línea para lo que le sigue.

Quizás no sea una situación muy corriente. Quién sabe. Pero por si acaso lo necesitas, aquí va la solución. Simple y sencilla.

See the Pen acronym-limit-lines by Kseso (@Kseso) on CodePen.

Te prometí sencillez y como puedes ver lo cumple. Todo se reduce a hacer que se manifieste el pseudoelemento ::before del elemento en línea que nos interese (en nuestro supuesto el acrónimo):

abbr::before { content: ''; display: block; }

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso