Why does using the CSS transform property break the stacking order when using z-index on pseudo-elements?

Question

I'm trying to make a little button hover animation by hiding one circle behind the other and having it expand then fade away. It works fine until I add a transform on the original element for alignment purposes, and then the previously hidden after element comes back to the front, even though I specify z-indices for both. Is there another way to force the stacking order, or am I completely missing something here?

.timeline__bullet-point {
  height: 1.5rem;
  width: 1.5rem;
  border: 0.2rem solid #8d35ff;
  background-color: #000;
  border-radius: 50%;

  position: relative;
  margin-left: 30%;
  z-index: 1;

  /*This is the transform that causes the after element to ignore z-indices when applied*/
  transform: translate(-50%);

  transition: all 0.2s;
}

.timeline__bullet-point::after {
  content: "";
  height: 100%;
  width: 100%;
  background-color: #8d35ff;
  border-radius: 50%;

  /*This is where I attempt to hide the after element by stacking behind, works without the above transform*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  transition: all 0.4s;
}