::after is not visible above the parent, how to fix it?

Question

css

Link to previous question:
How can I make the background of the pseudo-element overlay the background of the parent, but not the text of the content of the parent block?
The bottom line is that for an active tab, ::after should be superimposed on the bottom border of the tab and, as it were, the activity of the tab is emphasized.
https://codepen.io/alexeeey_kuznetsov/pen/RmgEeb
I tried to change the properties of the element in different ways. I don’t understand why it doesn’t appear, but if you look in the debugger and select after, then it is there and highlighted, but does not come forward, even with the z-index set.
Thanks in advance for your reply.

Answer 1

your after is cut off by the borders of the block, because the block is set to overflow: hidden
maybe you shouldn't use after, for example, when the tab is active, just remove the border from it?
https://codepen.io/anon/pen/RmgvVR