伪元素100%宽度不取容器大小

Question

我使用伪元素(之前)将border放在两列布局内的容器顶部。我想把border放在一个容器的顶部。

伪元素的width(被设置为100%)不应该使其内部容器的width吗?

#singleWrapper {
  margin: auto;
  max-width: 1100px;
}
.single #singleWrapper {
  margin: auto;
  max-width: 1100px;
  /*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
  position: relative;
  overflow: hidden;
}
#leftColumn .content-area {
  padding-right: 310px;
  width: 100%;
}
.articleWrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #009cff;
  background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
  height: 2px;
  width: 100%;
}
#leftColumn .content-area #main {
  background: #000;
  background: rgba(0, 0, 0, 0.30);
  padding-left: 20px;
  padding-right: 20px;
}
#singleWrapper .contentHolder {
  margin-right: -310px;
  width: 100%;
  float: left;
  position: relative;
}
#rightColumn {
  float: right;
  position: relative;
  display: block;
  width: 290px;
}
#leftColumn,
#rightColumn {
  display: inline-block;
  vertical-align: top;
  margin-top: 1.1em;
}

<div id="singleWrapper">
  <div id="leftColumn" class="contentHolder">
    <div id="primary" class="content-area">
      <main id="main" class="site-main" role="main">
        <div class="articleWrapper">
          <h1>Title</h1>
          <div class="articleBody">
            Article Body
          </div>
        </div>
      </main>
    </div>
  </div>
  <div id="rightColumn">
    Side Bar Area
  </div>
</div>

Answer 1

问题是您使用的是position:absolute

从MDN

绝对定位

相对定位的元素仍然被认为在文档中元素的正常流。相反，元素这个绝对的位置被从流中取出，因此放置其他元素时不要占用空间。绝对定位元素相对于最近的父元素定位。如果一个定位祖先不存在，使用初始容器

一个解决办法是把它添加到你的CSS:

.articleWrapper {
  position:relative;
}

并将.articleWrapper:before中的top:0;更改为您最喜欢的负值。

下面是一个代码片段

#singleWrapper {
  margin: auto;
  max-width: 1100px;
}
.single #singleWrapper {
  margin: auto;
  max-width: 1100px;
  /*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
  position: relative;
  overflow: hidden;
}
#leftColumn .content-area {
  padding-right: 310px;
  width: 100%;
}
.articleWrapper {
  position:relative;
}
.articleWrapper:before {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  background: #009cff;
  background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
  height: 2px;
  width: 100%;
}
#leftColumn .content-area #main {
  background: #000;
  background: rgba(0, 0, 0, 0.30);
  padding-left: 20px;
  padding-right: 20px;
}
#singleWrapper .contentHolder {
  margin-right: -310px;
  width: 100%;
  float: left;
  position: relative;
}
#rightColumn {
  float: right;
  position: relative;
  display: block;
  width: 290px;
}
#leftColumn,
#rightColumn {
  display: inline-block;
  vertical-align: top;
  margin-top: 1.1em;
}

<div id="singleWrapper">
  <div id="leftColumn" class="contentHolder">
    <div id="primary" class="content-area">
      <main id="main" class="site-main" role="main">
        <div class="articleWrapper">
          <h1>Title</h1>
          <div class="articleBody">
            Article Body
          </div>
        </div>
      </main>
    </div>
  </div>
  <div id="rightColumn">
    Side Bar Area
  </div>
</div>