Last Updated: February 25, 2016
· lukecarrier

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

Repost of my gist here:

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;