As front end developers, often we will find ourselves working with frameworks like Foundation & Bootstrap. I know some people swear by these frameworks whilst others steer clear at every opportunity, but whether you're a framework aficionado or not we often find ourselves developing our sites with some form of grid system that likely has helper classes like medium-8 or similar.

At work this week I had a situation where I had an element within a grid system with a background-color . This was fine, but as you'd expect the background-color just sits within the confines of the grid, which doesn't always give the look we're after. Here's what was happening:

This is ok, sure, but I wanted the background to stretch to the left, all the while keeping the content as is, in line with the grid.

The solution, as it turns out is pretty simple. Using our new favourite friend the pseudo elements we can create a pseudo element and absolutely position it off to the left, with the right hand side of the new pseudo element nudging up against the right of the actual element. This is done by specifying a large width (e.g. 9999px (width:9999px, left:-9999px). Then all that's left to do is to make sure the background-color of both elements match and hey presto we have the desired effect.

In my current project at work I've abstracted this out into a mixin for ease of use and I've included the mixin in the codepen below. Check it out:

Obviously the principle of extending elements out to one side can be used for extending to the top, right or bottom too.

nb: I created this earlier this week and haven't tested it out it any browsers other than Chrome. It should work, but if you see any potential downsides or have any comments drop me a comment or tweet me a twitter.