2

我有一个带有 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 无关紧要，它们的行为都是这样的。

4

1 回答 1

0

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

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

更新示例

.section {
    position: relative;
}
于 2015-02-17T16:18:43.870 回答