Recently I was making some UI for a friend's project. We had this CSS button effect that works elsewhere but failed to work at the desired location. Upon troubleshooting, we discovered that if the parent element has a background defined, you can't control the z-index of the pseudo selection of any of its children. Wait for it, I have got some demo. TL;DR set background colour or image for a " DIV.parent ", create a " Div.child " inside the " DIV.parent ". use CSS to modify the " ::before" " element of the " Div.child " as follows; set position as absolute, content as an empty string, height:100% and width is best at 50% for example purposes, lastly, give it a background colour. You will observe that the " ::before" " element is overlaying the actual element's content. Try to adjust the z-index of the " ::before" ". You will also realize that the z-index works fine if we remove the backgroun