What CSS3 CANNOT DO

1. CANNOT use multiple :before or :after pseudo-elements, but you can use both :before and :after at the same time.

Demo
Explanation
In this demo, the box element creates 5 round-corner rectangles (blue & red).
The :before pseudo element creates 3 yellow circles.
The :after pseudo element creates 3 green rectangles.
You may be wondering why there are more than 3 shapes. It is the power of box-shadow.

HTML & CSS

<style>
.box {
  display: inline-block;
  /*overflow: hidden; */
  position: relative;
  border-radius: .7em;
  /* the lenght of height and width do not matter */
  height: 2em;
  width: 2em;
  margin: 80px 50px; 
  font-size: 1em;
  /* use 'em' as the unit as it's scalable. change font size to make the shape larger or smaller */
  box-shadow: 2em 2em 0 0 red, 2em -2em 0 0 red, -2em -2em 0 0 red, -2em 2em 0 0 red;
  background: blue;
}
.box:after {
  content: '';
  position: absolute;
  top: .5em;
  left: 2em;
  height: 1em;
  width: 1em;
  background: lime;
  box-shadow: 2em 2em 0 0 green, 2em -2em 0 0 green;
}
.box:before {
  content: 'a';
  position: absolute;
  top: .5em;
  left: -1em;
  height: 1em;
  width: 1em;
  background: yellow;
  border-radius: 1em;
  box-shadow: -2em -2em 0 0 orange, -2em 2em 0 0 orange;
}
</style>
<div class="box"></div>

2. CANNOT use counter inside cacl() function