Псевдоэлемент 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; 
} 

и изменить top:0; в .articleWrapper:before к любому отрицательному значению вам больше нравится ,

вот фрагмент

#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>