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 元素定位，而不是 window.

Updated Example

.section {
    position: relative;
}

CSS3 列和伪元素定位

CSS3 Columns and pseudo element positioning

css

pseudo-element

css-multicolumn-layout