Outlining and Stacking in 1 div wonder

This series is about outlining and stacking in one div series of experiments.

by iamanubhavsaini

HTML

<div id="protagonist"></div>

CSS

body{ background-color: silver; z-index: 0;}
    
#protagonist{
        margin: 50px 100px;
        height: 100px;
        width: 100px;
        background-color: rgba(255, 0,0,0.1);

    }
    #protagonist::before{
        display: block;
        content: '';
        height: 100px;
        width: 100px;
        background-color: green;
        z-index: -1;
        position: relative;
        top: -30px;
        left: -30px;
box-shadow: 20px 30px 0 rgba(0,0,0,0.4);        
    }
    #protagonist::after{
        display: block;
        content: '';
        height: 100px;
        width: 100px;
        background-color: transparent;
        z-index: -1;
        position: relative;
        top: -70px;
        left: 30px;
box-shadow: -20px 30px 0 rgba(0,0,0,0.9);
    }
    #protagonist:hover::after{ outline: thin solid white; }
    #protagonist:hover::before { outline: thin solid black; }
    #protagonist:hover{ outline: thin solid red; }