CSS显示在每隔一个元素

Question

我有一种效果，我试图重现，一个元素下的微妙阴影。

我有一个JSFiddle来说明我想要完成的任务。

这段代码会产生阴影，但不够笨拙只会出现在精选元素上，甚至会在调整窗口大小后调整，然后显示在不同的元素上。

.an-emotion::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 0.7%;
  left: -4%;
  margin: 0 0 0 50%;
  transform: rotateX(45deg) scale(10, .75);
  background: #000;
  box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;