You can see the problem - or at least, you could if the quotes weren't in the way. By default, the ::before and ::after pseudo-elements have z-index: auto, which means the browser draws them over the top of any other content within their originating element.

If we give the ::before and ::after elements a z-index: -1, they'll get pushed to the back of the current stacking context - but that means they'll be drawn behind the originating element, and most likely end up being hidden by that element's background.

We can fix that by putting a z-index: 1 on the originating element, but that isn't ideal. We don't want to modify the originating element's z-index - we just want to control where the pseudo-elements sit relative to the originating element's content and background.

Instead, if we use isolation: isolate, we can create a stacking context without specifying a z-index. Then we can specify z-index: -1 on the ::before and ::after pseudo-elements to move them to the back of that stack, behind the element's text.