拥有::在拉伸整页宽度之前

Question

问题

我试图将::before元素从页面的左侧延伸到右侧，即使它附着的元素居中并略微向下页面（因此不知道窗口大小是什么等）。

以下是我想要的实例：

http://codepen.io/robcampo/pen/dilCe

问题在于我使用静态值来定义width和left位置：

left: -9000px;
width: 99999px;

这不是理想的。我理解如果我将元素移动到页面上的另一个位置，这可以解决，但我需要它附加到它附加的元素。

问题

是否有一种干净的方法可以使::before内容跨越整个页面宽度而不使用静态值？

注意

• 此元素上方和下方有内容，远离身体远离DOM树
• 我可以使用JS解决，但我想要一个纯CSS解决方案

Answer 1

如果从父元素中删除position: relative，则可以轻松执行此操作。

您可以将此.title置于中心位置：

.title {
  margin: 0 auto;
}

然后你可以像这样调整::before：

.title::before {
  position: absolute;
  left: 0;
  width: 100%;
}

将所有内容整合在一起：http://codepen.io/anon/pen/xLKGc

PS：注意IE8和之前不支持双冒号（CSS3）表示法，所以如果你需要支持IE8，请确保使用单个冒号（CSS 2.1），其他人支持浏览器也可能会有一段时间。