how to css after elements for background overlays

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

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

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

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

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