<div class="block">
  
</div>
<br>
<div class="block block--active">
  
</div>

.block{ /*красный квадрат*/
  width:100px;
  height:100px;
  position:relative;
  background:red;
}

.block:after{
  /*зеленый квадрат*/
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background:green;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.block--active:after{
  background:black;
}