伪元素 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

Absolute positioning

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used

解决方法是将此添加到您的 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>

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

Pseudo Element 100% width is not taking container size

html

css

pseudo-element