[SOLUCIONADO] unir dos o mas bloques con linea vertical

[NSD]

Hola gente, me encuentro ante un problema que no logro resolver, tengo que maquetear esto:

el html que tengo es este:

Código HTML:

<!-- En el caso de la imagen que puse, este seria el html -->
<section id="publicaciones">
    <div class="mensaje rosa">
        <div class="icono linea abajo"></div>
        <img src="#" class="avatar">
        <div class="mensaje">
        </div>
    </div>
    <div class="mensaje celeste">
        <div class="icono linea arriba"></div>
        <img src="#" class="avatar">
        <div class="mensaje">
        </div>
    </div>
</section>
 
<!-- Pero tambien podria tener cosas como esta donde la linea negra debe aparecer tanto arriba como abajo  -->
<section id="publicaciones">
    <div class="mensaje rosa">
        <div class="icono linea abajo"></div>
        <img src="#" class="avatar">
        <div class="mensaje">
        </div>
    </div>
    <div class="mensaje celeste">
        <div class="icono linea arriba abajo"></div>
        <img src="#" class="avatar">
        <div class="mensaje">
        </div>
    </div>
    <div class="mensaje celeste">
        <div class="icono linea arriba"></div>
        <img src="#" class="avatar">
        <div class="mensaje">
        </div>
    </div>
</section>
 

El tema de las imagenes y eso se resolverlo, lo que no se como hacer es la linea esa que une los dos div que en algunos div puede estar abajo, en otros arriba o en ambos y ademas tiene que tener el circulito ese.

pense en usar 3 background-image pero quizas exista una solucion mas elegante.

a alguien se le ocurre como resolverlo? cada bloque tiene alto variable

[pzin]

No se ve la imagen, ni hay CSS para verlo tampoco y la explicación tampoco ayuda demasiado.

[NSD]

la imagen nose xq no sale, pero si le das con el boton derecho abrir en pestaña nueva la podes ver bien sin problemas.

en realidad no tengo css todavia, quiero resolver lo de las lineas esas primero y despues veo el resto que ya se hacerlo, fijate de ver la imagen y te vas a dar cuenta bien lo que quiero

[pzin]

Vale, ya puse bien la imagen.

Pues así, se entiende más el asunto.

¿Siempre van a tener la misma distancia y dimensiones los elementos/círculos/imágenes?

[NSD]

no, es un sistema de comentarios, por cada comentario aparece el avatar del usuario y a la derecha el texto, el alto va a depender de cuant texto halla escrito, todos los comentarios llevan el puntito de color a la izquierda, pero si un comentario es respuesta de otro entonces van unidos por la linea vertical. el tamaño del circulito es fijo, idem el del avatar, el avatar va alineado a la parte superior del div del comentario y el circulito al medio (si el tipo escribe mucho el avatar y el circulito no van a quedar a la misma altura, como en la captura)

alguna idea de como crear la linea vertical que salga del circulito hacia arriba/abajo?

[pzin]

Bueno, una solución en forma de código no puedo darte ahora, ya que requiere algunas pruebas seguramente. Pero si piensas en esa linea como si fuesen dos lineas divididas supongo que será más fácil de hacer.

Lo del punto no tiene mayor problema, ya que siempre aparece justo al lado del avatar del usuario, eso podría ser incluso parte del avatar, con un pseudo-elemento mismamente.

Tienes que seccionar un poco la idea, no pensar en cómo hacer una linea de aquí hasta allá. Empieza por el punto por ejemplo. Yo empezaría por ahí.

[pzin]

Bueno, me puse a hacer algo: http://codepen.io/pzin/pen/nEhmD

Las lineas van siempre de punto a punto y tanto el punto como las lineas son pseudo-elementos, es decir, todo con CSS. El último comentario no tiene linea porque se le quita con un :last-of-type:before.
Las lineas como digo, siempre van del top: 30px hasta el bottom: -50px, que es donde están situados los puntos.

Puedes ver el código CSS puro dándole justo encima del título de la pestaña del código (dándole a "CSS", vaya).

Ahora, ¿cuáles son las otras lineas?

[NSD]

Simplemente genial, muchisimas gracias pzin sos un grosso eso es exactamente lo que nesesitaba!! que pases unas muy felices fiestas!

[NSD]

Ahora, ¿cuáles son las otras lineas?

emm nose, a las que me referia yo es a esas que unian los dos puntitos que aparecen en el ejemplo que publicaste con esas sola era el problema, muchas gracias de nuevo!

[pzin]

Ah vale, pensé que era algo más complejo, tipo comentarios anidados y que luego las lineas tenían que torcerse o algo así.