css - ::before または ::after 擬似セレクターを追加すると、アニメーション中に基本要素が消えるのはなぜですか?

Question

私はフラット ボタンのデザインを試しており、クラス全体にアニメーションを配置して拡大しようとしました:hover。:after疑似要素を追加した後、基本クラスが:afterアニメーション化されると背後に消えてしまいます。疑似要素を入れz-index:-1;てみました:hover:afterが、前に出ません。:after要素が遅れていることを確認する証拠として、要素の不透明度を変更しました。

基本要素が一番上にあることを確認するにはどうすればよいですか? 背景色を「なし」に変更できますが、塗りつぶす必要がある場合はどうすればよいですか?

さらに、基本要素のみを参照するにはどうすればよいですか? を実行すると、と疑似要素class:hoverの両方を含むオブジェクト全体が参照されます。:before:after

HTML:

<div id='wrap'>
  <button class='a'>Test</button>
</div>

CSS:

#wrap{
  position: relative;
  left: 100px;
  top: 100px;
  width: 500px;
}
.a{
  position:relative;
  border-radius: 100%;
  background-color: #ddd;
  height: 100px;
  width: 100px;
  border: none;
  background-color: red;
  color: white;
  transition: all 0.2s;
}

.a:after{
  border-radius: inherit;
  content:'';
  position: absolute;
  z-index:-1;
  height: 112px;
  width: 112px;
  border: 4px red solid;
  top: -10px;
  left: -10px;
  z-index: -1;
  transition: all 0.2s;
  background-color: white;
}
.a:hover{
  transform: scale(1.2,1.2);
}
.a:hover:after{
  opacity: 0.8;
  z-index: -1;
}

デモ。