Placing a circular element on margin like in timelines

Question

I am trying to code a design that looks like this:

So far, I have managed to get the center margin, the speech bubbles and the triangles on the bubbles. However, I am not sure how to go about the corresponding circle elements that needs to be placed on the margin.

I have a simple mockup here: http://cssdesk.com/5bdmv

I could create elements and absolutely position them for each bubble, but that's not the right way of doing it.. and I cannot have multiple psuedo elements either.

How would I do this without having to absolutely positioning them, please?

Answer 1

One way would be to add a span into the event div and then style that accordinly. I have edited your markup here: http://cssdesk.com/8FNgu