I am currently using a pseudo element (before) to add a border on top of a container within a two column layout. My goal is to have the border only appear on one specific container.
Since I have set the width of the pseudo element to 100%, shouldn't it automatically adjust to match the width of the container that it resides in?
#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>