z-indexについて

Question

質問の閲覧をありがとうございます。
CSSの書き方で、下記個所にて問題が起き、解決できないので質問させていただきました。
お手数ですが、ご確認をよろしくお願いいたします。

前提・実現したいこと

background-color: pinkがついている個所を.modal__btn__detailの背景画像よりも後ろにしたいです。
（ピンク背景をhoverすると横に動くアニメーションを実装しています。）

発生している問題

ピンクの個所が.modal__btn__detailの背景画像より後ろに配置されない。
aタグ内「詳細はこちら」の文字より後ろに配置はできている状況。
参考：問題個所の添付画像

参考：完成させたいイメージ

該当のソースコード

<div class="modal__btn">
    <div class="modal__btn__detail">
        <a href="#" target="_blank">詳細はこちら</a>
    </div>
     <div class="modal__btn__notice">
        <a href="#" target="_blank">オトクなお知らせ</a>
    </div>
</div>

.modal__btn{
    position: relative;
    display: flex;
    justify-content: center;
    list-style: none;
    font-size: 13px;
}
.modal__btn .modal__btn__detail{
    position: relative;
    background-image: url(../common/img/pc/service_modal/big_btn.png);
    background-position: center;
    background-repeat: no-repeat;
    padding: 12px 20px;
    margin-right: 40px;
    z-index: 5;
}
.modal__btn a{
    color: #3c3c3c;
    text-decoration: none;
}
.modal__btn .modal__btn__detail::after{
    content: "";
    background-color: pink; /*#FFFFFA*/
    height: 45px;
    width: 100px;
    position: absolute;
    bottom: 0;
    left: 10px;
    z-index: -1;
}
.modal__btn .modal__btn__detail:hover::after{
    animation: hover 0.25s cubic-bezier(.4, 0, .2, 1) forwards;
}
.modal__btn .modal__btn__notice{
    background-image: url(../common/img/pc/service_modal/big_btn.png);
    background-position: center;
    background-repeat: no-repeat;
    padding: 12px 8px;
}
@keyframes hover {
    100%{
        transform: translateX(100%);
    }
}

試したこと

.modal__btn__detail：
z-indexの値を上げる、position: relativeを追加したうえでz-indexの値を上げる。
→効果なし。

.modal__btn__detail::after：
z-indexの値を下げる。
→aタグ内「詳細はこちら」の文字より後ろに配置はできたが、背景画像はピンク背景より前に出てこず。

Answer 1

.modal__btn__detail a{display:block;padding:12px 40px;border:solid 2px #000;position:relative;z-index:1;}
.modal__btn__detail a::after{content:"";display:block;width:100px;heigh:45px;background:#pink;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);z-index:0;}

背景画像が何を表示しているのかわかりませんが、もし枠線ならCSSで作れるので、上記ではだめでしょうか？
確認をしていませんので、サイズなどは適宜修正して下さい。

Comments

[nagano0141cafe]

ご提示してくださったソースではピンク背景が黒枠より後ろに行くことが確認できました。
ありがとうございます。
ただ、黒枠の部分にデザインが入っているので、ページ上部の添付画像の黒枠（ソースの../common/img/pc/service_modal/big_btn.png　黒枠内部の背景透過）を使用したい所存です。
黒枠部分のz-indexをどうにかして効かせたいです...