overlay with before css code example

Example 1: how to css after elements for background overlays

.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;}

Example 2: how to css after elements for background overlays

.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);}