Check out example codes for "how to css after elements for background overlays". It will help you in understanding the concepts better.

Code Example 1

.banner {    overflow: hidden;}.banner::after {    content: "";  // :before and :after both require content    position: absolute;    width: 75%; // Makes the overlay smaller to accommodate the skew    height: 100%;    top: 0;    left: 50%; // Push the element 50% of the container's width to the right    transform: skew(15deg) // Puts the element on an angle               translateX(-50%); // Moves the element 50% of its width back to the left    background-image: linear-gradient(120deg,#eaee44,#33d0ff);}

Code Example 2

<section class="banner">    <h1>Hello World</h1></section>

Code Example 3

.banner::after {    opacity: .7;    @supports (mix-blend-mode: hue) {        opacity: 1;        mix-blend-mode: color;        mix-blend-mode: hard-light;        mix-blend-mode: hue;    }}

Code Example 4

.banner::after {    /* opacity: .7; */    mix-blend-mode: color;    mix-blend-mode: hue;    mix-blend-mode: hard-light;}

Code Example 5

.banner::before {    transform: skew(-15deg)                translateX(-50%);}

Code Example 6

.banner::after {    ...    z-index: 1;}.banner > * {    z-index: 100;}

Code Example 7

.banner::after, .banner::before {    ...}

Code Example 8

.banner::after {    content: ""; // ::before and ::after both require content    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-image: linear-gradient(120deg, #eaee44, #33d0ff);    opacity: .7;}

Learn ReactJs, React Native from akashmittal.com