[z-index]animeteを使用した際の疑似要素の位置がおかしい[cssのみ]

現在カスタムCSSの機能を使用して、初期表示のanimetionを作成しています。

疑似要素を親要素の後ろに置きたいのですが、animeteを使用すると、

親要素の要素は前に出る
親要素のborderが疑似要素の後ろに出てきてしまう

現象が発生してしまいます。

.description-md-title {
    color: var(--main-font-color);
    padding: 25px 0.5em;
    font-size: 20px;
    text-align: center;
    background-color: transparent;
    width: 100%;
    font-weight: bold;
    /* 取り消し+レイアウト調整 */
    margin: 15px 0;
    margin-bottom: 40px;
    box-shadow: none;
    position: relative;
    border: 4px solid var(--main-font-color);
    z-index: auto;
}

.description-md-title::before {
    background-color: var(--main-color);
    content: "";
    position: absolute;
    left: 15px;
    top: 15px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

//animetion
.description-md-title{
    animation-name: fadeup-right;
    animation-duration: .5s;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-delay: .5s;
}

@keyframes fadeup-right {
    from {

        opacity:0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

animeteを使用する前であればスタックコンテキストを発生させずに、beforeを後ろに置くことができるのですが、
animeteをつけた際に、opacityかtransformかの原因で、疑似要素が前に行くようになってしまします。

ちなみに、animeteのセレクタを親要素と疑似要素の２つに増やした際、

初期では狙った描写が出る
フェードインするにあたって最初に記述した状態になってしまう

現象が発生しました。

##理想としていること
beforeが後ろの状態でanimetionを実装すること

##やってほしくないこと

追加でHTMLの要素を増やす(カスタムCSSのため)
追加でHTMLをのクラスを増やす(カスタムCSSでいじっているため)

以上です。助けていただければ大変ありがたいです。よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

before疑似要素単体でスタッキングコンテキストができているので、親要素よりも（記載順が後なので）上側に描画されてしまっていると思われます。（理屈はちょっと自信がないです）

before疑似要素と同じ兄弟レベルで他の要素にborderをつけ、z-indexをbeforeより上にすれば一応は解決します。
ということで、after疑似要素に親要素と同じborderをつける方法を紹介します。

css
1.description-md-title::after {
2  content: "";
3  position: absolute;
4  border: 4px solid var(--main-font-color);
5  z-index: 1;
6  left: -4px;
7  right: -4px;
8  top: -4px;
9  bottom: -4px;
10}