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; }

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 Don Kseso Kseso

Comentarios: 2

  1. Quiero reunir "inline" una serie de links al final del post en mi blog, en una caja con background, etc.
    .blokcuote { background: #...; display: inline; widht: 100px; }
    Pero no da resultados, mi pregunta es ¿Porqué. Está mal escrito el css?

    ResponderEliminar
    Respuestas
    1. Hola Antoni

      La propiedad width no está permitida en elementos inline (excepto en los reemplazados como imágenes o iframes).
      Por lo tanto, por mucho que la declares vía Css será ignorada y la anchura de tus .blokcuote será la que fuerce su contenido.

      Por cierto y a título informativo y complementario, .blokcuote como nombre de selector por clase será correcto si ese es el valor del atributo class. Pero el nombre del elemento html es blockquote

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap