Outlining and Stacking in 1 div wonder

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

by jshacker

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;
}