@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; } }
Preview:
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