title: CSS3 Columns and pseudo element positioning
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I'm guessing the issue is with this bit of code: </p>
  
  <pre><code>.marker:after {
      content: ' ';
      display: block;
      white-space: nowrap;
      position: absolute;
      left: 0px;
      width: 0;
      height: 0;
      border: 6px solid green;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/o0xu0e2x/1/" rel="nofollow">http://jsfiddle.net/o0xu0e2x/1/</a></p>
  
  <p>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.</p>