pseudo elements

this line goes to create some pseudo elements and use them to create shapes.

by jshacker

HTML

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

CSS

#protagonist {
  width: 100px;
  height: 100px;
  background-color: red;
  /* position: relative; */
}
#protagonist::before {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 100px;
  left: 100px;
  content: "";
}
#protagonist::after {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute;
  top: 200px;
  left: 200px;
  content: "";
}

JavaScript

// needs content: