CSS3 列和伪元素定位

Question

我有一个带有 CSS3 列的页面，我试图将伪元素放置在与内联元素相同的 Y 位置，但在固定的 X 位置（在左边距）。这在第一列上效果很好，但其他列中的其余这些伪元素无法正常运行。

最终发生的情况是，伪元素被放置在左边距，如果它在单个列中，元素会在哪里。如果您向下滚动，您将看到左侧的绿色块，如果它在单列中，则文本所在的位置。

我希望绿色块位于存在的文本行左边缘的列间隙区域中。

我猜问题出在这段代码上：

.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/

注意：我的应用程序只需要 Chromium 41+ 支持，这就是我使用 -webkit 标签的原因。使用伪元素 :before/:after 没关系，它们的行为都是这样的。

Answer 1

你需要相对定位父.section元素。

这样做时，绝对定位的伪元素被定位为相对.section 元素而不是窗口。

Updated Example

.section {
    position: relative;
}