SCSS %placeholder on ::before and ::after property

sass-placeholder-beforeafter.scss

// Before and after with the same properties
%beforeafter {
   content: '';   
   position: absolute;
   display: block;
   z-index: 1030;
   left: 0;
   right: 0;
}
// Shape
.shape {   
   width: 100%;
   padding-right: 15px;
   padding-left: 15px;
   -webkit-flex: 0 0 33.33333%;
   -ms-flex: 0 0 33.33333%;
   flex: 0 0 33.33333%;
   max-width: 33.33333%;      
   &-body {      
      @extend %box-shadow;
      background:white;
      padding: 2rem;
      position: relative;
      overflow: hidden;
      border-radius:5px;
      &:before, &:after {
         @extend %beforeafter;
         height:150px;
         width:100%;
         display:block;
         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQoU2NkIBIwEqmOgXyFU6dObQDZkp2dDaZhAMVEmCKYJLJi8hSCTCLKanwhQL6vcZkKAMbtEAuAaq67AAAAAElFTkSuQmCC');
         background-position: top;
         background-repeat: repeat;
         background-attachment: scroll;
         opacity:.35;
      }
      &:before { top:0; transform: rotate(-10deg) translateY(-90px) translateX(5px); }      
      &:after { bottom:0; transform: rotate(-10deg) translateY(90px) translateX(-5px); }
   }   
}