Last Updated: February 25, 2016
·
20.59K
· lukecarrier

SASS mixin for ::before/::after background images

Repost of my gist here: https://gist.github.com/2522835

Note that it'll only work on elements that can contain other elements; for instance you'll need to wrap input tags in span tags and apply the mixin to these.

@mixin before-after-background($height, $side-width, $before, $after) {
 height: $height;
 position: relative;
 z-index: 1;

 &:before, &:after {
 content: '';
 display: block;
 height: $height;
 position: absolute;
 top: 0px;
 width: $side-width;
 z-index: -1;
 }

 &:before {
 background-image: $before;
 left: -$side-width;
 }

 &:after {
 background-image: $after;
 right: -$side-width;
 }
}