 <p>I stumbled upon this question after searching for a similar thing. Since (sadly) I didn't find a CSS-only solution for this problem, I ended up using jQuery to do the job.</p> <pre><code>function hrExpand() { var windowWidth = $(window).width(); $('hr').width(windowWidth).css('margin-left', function(){ return '-' + ($(this).offset().left) + 'px'; }); } </code></pre> <p>Just make sure to run the function both onload and onresize.</p> <p>Example: <a href="http://codepen.io/anon/pen/qEOoGb" rel="nofollow">http://codepen.io/anon/pen/qEOoGb</a></p> <p><em>(You could replace $('hr') with e.g. $('.content > hr') to increase performance a bit and prevent it from replacing ALL the hr's on your page)</em></p>