CSS3 Columns and pseudo element positioning

Question

I've got a page with CSS3 columns, and I am trying to place a pseudo element at the same Y position as the inline element, but at a fixed X position (in the left margin). This works great on the first column, but the rest of these pseudo elements in the other columns do not behave properly.

What ends up happening is that the pseudo elements are placed along the left margin, where the element would be if it were in a single column. If you scroll down you will see the green blocks along the left where the text would be if it were in a single column.

What I'd like is for the green blocks to be in the column gap area at the left edge of the line of text where the exists.

I'm guessing the issue is with this bit of code:

.marker:after {
    content: ' ';
    display: block;
    white-space: nowrap;
    position: absolute;
    left: 0px;
    width: 0;
    height: 0;
    border: 6px solid green;
}

JSFiddle: http://jsfiddle.net/o0xu0e2x/1/

Note: My application only requires Chromium 41+ support, so that is why I am using -webkit tags. Using pseudo element :before/:after does not matter, they both behave this way.

Answer 1

You need to relatively position the parent .section elements.

In doing so, the absolutely positioned pseudo elements are positioned relative to the .section elements rather than the window.

Updated Example

.section {
    position: relative;
}