body {
  display: flex;
  justify-content: center;
}

.square {
  position: relative;
  background: blue;
  width: 50px;
  height: 50px;
}
.square::before {
  position: absolute;
  left: -50px;  
  content: '';
  display: block;
  height: 50px;
  width: 50px;
  background: green;
}
.square::after {
  position: absolute;
  left: 50px;
  content: '';
  height: 50px;
  width: 50px;
  display: block;
  background: red;  
}