background overlay css before 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::after {    /* opacity: .7; */    mix-blend-mode: color;    mix-blend-mode: hue;    mix-blend-mode: hard-light;}