Full-Width-Bars-Using-Pseudo-Elements.markdown

Full Width Bars Using Pseudo-Elements

http://codepen.io/parkerbennett/pen/raLaYb

Forked from Parker Bennett's Pen Full Width Bars Using Pseudo-Elements.

A Pen by Chris Coyier on CodePen.

License.

index.html

<section>
  <h2 class="full-width">Full-Width Bar Using Pseudo-Elements</h2>
  <p>Using :before and :after pseudo-elements, we can extend the apparent background of the h2 element beyond the &lt;section&gt; it's contained in.</p>
  <p>Unfortunately, this triggers a horizontal scrollbar, so we need to set both the html and body elements to overflow-x: hidden.</p>
  <p>Unless you need the added flexibility of styling both sides (different colors, heights, widths, gradients, etc.) there's a simpler approach using <a href="http://codepen.io/parkerbennett/pen/KwMwxr" target="_blank">negative margins and padding</a>.</p>
</section>

style.css

/* both */
html, body {
  overflow-x: hidden;
}
body {
  background: #ccc;
}
section {
  box-sizing: border-box; /* or not */
  margin: 0 auto;
  width: 25rem;
  background: white;
  padding: 30px;
  padding-bottom: 60px;
}
.full-width {
  position: relative; /* child absolute */
  /* negative offset = section padding */
  margin: 0 -30px;
  /* add back section padding value */
  padding: .25rem 30px;
  background: #333;
  background: rgba(0,0,0,.8);
  color: white;
  font-size: 1.125rem;
}
.full-width:before, .full-width:after{
  content: "";
  position: absolute;
  /* fill vertically */
  top: 0;
  bottom: 0;
  width: 9600px;
  right: 100%;
  background: red;
}
.full-width:after { 
  width: 320px;
  left: 100%;
  /* not browswer prefixed */
  background: green;
}