html - Bottom border wider than div using CSS -

html - Bottom border wider than div using CSS -

i'm styling theme blog right , want separate individual posts lean line. each post centered , 800 pixels wide. naturally,

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

gives me nice little border underneath post.

however, because post <div> 800 pixels wide, border-bottom 800 pixels wide , centered underneath post. i'd love have little separator goes across whole screen without having set div's width 100%. ideas?

you can if .post not positioned relative:

working demo

html { width:100%;} .post { background: #fff; margin: 40px auto 80px; width: 400px; } .post:after { position:absolute; left:0; content: " "; display:block; height:40px; border-bottom: 1px solid grey; width:100%; }

html css