Pseudo element not going behind parent element using z-index

https://codepen.io/stressunfit/pen/BaMyJEr?editors=1100
Hi in this codepen i am trying to create number 1. i want the pseudo element to go behind the .number div but i am not able to achieve that. can anyone explain how stacking context is working here.
Was this page helpful?