Preview:
@mixin pseudoInit{
        content: "";
        display: block;
        position: absolute;
        left: 0; top: 0;
        z-index: -1;
}
@mixin beforeContainer($bg: transparent, $w: 100%, $h: $w){
    position: relative;
    z-index: 1;
    &::before{
        @include pseudoInit;
        background: $bg;
        width: $w;
        height: $h;
    }
}
@mixin afterContainer($bg: transparent, $w: 100%, $h: $w){
    &::after{
        @include pseudoInit;
        background: $bg;
        width: $w;
        height: $h;
    }
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter