add text background color with pseudo before code example

Example 1: how to css after elements for background overlays

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

Example 2: how to css after elements for background overlays

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