After pseudo element displayed on top

Hi, I am trying to create an isometric tile and I would like to give it kind of 3d look.
Something like this:

These are two divs stacked on top of each other.
However I wanted to achieve the same using ::after pseudo element, problem is after element is displayed on top of its parent and I have no idea why it’s not following z-index.
See following codepen: ,


Replace div::after with below and check :slight_smile:

div::after {
content: “”;
width: 100%;
height: 100%;
position: absolute;
top: -10px;
left: 10px;
background: red;
z-index: -10;
border-radius: 10%;

1 Like

Thank you, that would work, but question remains, why is z-index property being ignored or rather what stacking rules are being followed, I have read this but still, it does not make sense why after is on top of the parent.



this worked…thank you @pseudop…awesome link