I recently learned a technique that allows me to add elements before and after with css, however when I implemented the same logic in the keys part of my css buttons, it did not work as I expected. I need help as this is the first time I am coming across this problem in my webdev journey.
I believe the cause of the issue is my usage of flex and possibly other properties conflicting with my z-index usage. I tried applying position relative and rearranging their order as I believe button, button::after are siblings so should have followed z-index logic, but I am not understanding why it does not work.
I tried messing around with z-index values and applying position relative, absolute across the divs however it was not successful sometimes the background of the buttons got ignored, sometimes the rgb button::after div appeared behind the keyboard, I just am a little burnt out thinking about this.
What would be the way you would code this to avoid conflicts?