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: https://codepen.io/Spell2az/pen/XVMLMZ ,
Hi,
Replace div::after with below and check 
div::after {
content: “”;
width: 100%;
height: 100%;
position: absolute;
top: -10px;
left: 10px;
background: red;
z-index: -10;
border-radius: 10%;
}
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 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index but still, it does not make sense why after is on top of the parent.