疑似要素の扱いがまだまだな今日このごろです。
こちらのページを元に、ボタンを作りました。
https://www.nxworld.net/tips/10-css-cute-design-good-chemistry-button-design-and-hover-effect.html#anchor09
9 . 背景が枠からズレたボタン
このボタンも以前作ったボタン同様、a要素で擬似要素を使っています。
::after でピンク色部分を絶対配置でずらして、a 要素の後ろに z-index: -1 で配置しています。
hover 時に transition を使って、ずらしたピンク色部分が a 要素の黒枠に収まる、というアニメーションです。
hover 時のアニメーションが変
z-index: -1 のはずなのに、::after要素（ピンク色部分）が a 要素の黒枠の上を通るのです。z-index: -5 など数値を下げても変わりありません。
アニメーション中の状態です↓
イメージ↓
コードまるまるコピーして使っても、ボタン設置予定場所では変なことになってしまいます。
※codepenではうまくいきました。
z-index: -1 で親要素の後ろにいく
親要素には何の設定もしていません。
背景画像を置いていたので、つまづきました。
（png画像で透過させるという、無理矢理で妥協した形で解決）
これは「重ね合わせコンテキスト」を理解すれば説明がつきそうです。
やってみたこと
何とか原因を突き止めて解決できたので、それまでに試したことを挙げます。
アニメーションの条件を変更
:hoverでうまくいかないので、.button.onと、on クラスが付いたときの挙動を確認しました。
→ちゃんと黒い枠線が見えました。
a 要素から span 要素に変更
今度は a タグを疑ってみました。
span 要素を hover したときを検証しました。
→黒い枠線見えました。
ということは、a 要素独自の何かが怪しい...？
最終的にはデベロッパーツールでいろいろチェックを入れたり外したり、試行錯誤しました。
原因は a 要素のopacity
実はcssで a:hover { opacity: .8; } と設定しています。
それをなくすと（opacity: 1 でもOK）、謎現象は解消されました。
opacity が作用していたなんて想像つきませんでした。
てっきりz-index とか pointer-events で解決できるのかと。
描画の問題で起こる現象なんでしょうね。
さきほども触れましたが、z-indexの話、どこかの折に重ね合わせコンテキストについておさらいしたいです。
おしまい。
