Bottom border wider than div using CSS

Question

I'm styling a theme for a blog right now and I want to separate individual posts with a thin line. Each post is centered and 800 pixels wide. So naturally,

.post {
  background: #fff;
  margin: 40px auto;
  width: 800px;
  padding-bottom: 40px;
  border-bottom: 1px solid grey;
}

Gives me a nice little border underneath the post.

However, because the post <div> itself is only 800 pixels wide, the border-bottom will also be 800 pixels wide and centered underneath the post. I'd love to have a little separator that goes across the whole screen without having to set the div's width to 100%. Any ideas?

Answer 1

You can do this if your .post is not positioned relative:

html {
    width: 100%;
}

.post {
    background: cyan;
    margin: 40px auto 80px;
    width: 400px;
}

.post::after {
    position: absolute;
    left: 0;
    content: " ";
    display: block;
    height: 40px;
    border-bottom: 1px solid grey;
    width: 100%;
}

<div class="post">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit perspiciatis ipsam necessitatibus repudiandae molestias soluta possimus rerum cum. Veritatis pariatur harum est assumenda nemo voluptas distinctio cum adipisci error voluptatem!</div>
<div class="post">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit perspiciatis ipsam necessitatibus repudiandae molestias soluta possimus rerum cum. Veritatis pariatur harum est assumenda nemo voluptas distinctio cum adipisci error voluptatem!</div>

See original JS Fiddle here.

Answer 2

Instead of useing an border-bottom, use :after instead.

Example

.post {
       background: #fff;
       margin: 40px auto;
       width: 800px;
       padding-bottom: 40px;
       /*border-bottom: 1px solid grey;*/
    }
.post:after {
    content:"";
    display:block;
    border-bottom:1px solid #000;
    height:0px;
    width:820px;
    position:relative;
    left:-10px;
}

See the gained width and left positioning.