flexbox not aligning：after＆amp; ：在正确使用firefox和safari之前

Question

我正在制作加载动画。我的问题是，仅使用flexbox对这些内容似乎只能在Chrome中正常运行。 :before＆amp; :after位于Firefox的父div的底部，位于safari的顶部。

#pulse-box {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pulse {
  position: relative;
  width: 12.5px;
  height: 50px;
  animation: pulse 750ms infinite;
  animation-delay: 250ms;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pulse:before,
#pulse:after {
  content: '';
  position: absolute;
  display: block;
  width: 12.5px;
  height: 33.3px;
  background: #efefef;
  animation: pulse 750ms infinite;
}

#pulse:before {
  left: -25px;
  /*  -(pulse height / 1.5) */
}

#pulse:after {
  left: 25px;
  /* (pulse height / 1.5) */
  animation-delay: 500ms;
}

@keyframes pulse {
  0%,
  10% {
    background: #efefef;
  }
  50% {
    background: #5b5b5b;
  }
}

<div id="pulse-box">
  <div id="pulse" />
</div>

您也可以在我制作的jsfiddle中看到这一点。

Answer 1

放手一搏......

#pulse::before, #pulse::after {
    content: '';
    position: absolute;
    display: block;
    width: 12.5px;
    height: 33.3px;
    background: #efefef;
    animation: pulse 750ms infinite;
    top: 50%;
    transform: translateY(-50%);
}

https://jsfiddle.net/opt4jmmt/