CSS変換で擬似要素が親から上に移動する

Question

ボタンの下に配置した擬似要素をクリックすると、クリック効果が得られます。私はこのコードを書いた：

button { 
 
    appearance: none; 
 
    --webkit-appearance: none; 
 
    background-color: #0070c9; 
 
    border-radius: .3em; 
 
    border: none; 
 
    color: white; 
 
    display: inline-block; 
 
    font: inherit; 
 
    font-size: 1.5em; 
 
    padding: 5px 10px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
} 
 
button::after { 
 
    background-color: #005496; 
 
    border-radius: .3em; 
 
    bottom: -.2em; 
 
    content: ''; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: -1; 
 
} 
 
button:active, button:focus { 
 
    outline: none; 
 
} 
 
button:active { 
 
    transform: translateY(0.1em); 
 
} 
 
button:active::after { 
 
    bottom: -.1em; 
 
}

<button>Button</button>

ボタンをクリックすると、擬似要素は、ボタンの背景となり、私は、変換が起こっている間、擬似要素の上に明るい背景が残るようにしたい。擬似要素がテキストの下を移動し、ボタンの背景の上に移動する理由はありますか？

注：元のコードにベンダープレフィックス付きのCSSは使用していません。このページには--webkit-appearance: none;が追加されました。後でこれを処理するためにポストプロセッサを使用します。

編集

ボタンがアクティブ状態ではないアクティブ状態で、左、右の画像のように見えます。

私はそれがアクティブ状態にあるときにボタンが暗くなることを望んでいません。私はバックグラウンドを同じままにしておきたい。

私はそれをクリックしたときに、ボタンは次のようになりたい：

Answer 1

私も、その後のzインデックスをシフトした擬似要素の前に::を追加しました：前に：ボタンがアクティブなときに擬似要素の後に私はまた、ボタンのテキストの周りにスパンを追加し、擬似要素の前にそれを持って来るために3の相対的なposititionとZのインデックスを追加しました。

button { 
 
    appearance: none; 
 
    background:none; 
 
    --webkit-appearance: none; 
 
    border-radius: .3em; 
 
    border: none; 
 
    color: white; 
 
    display: inline-block; 
 
    font: inherit; 
 
    font-size: 1.5em; 
 
    padding: 5px 10px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
} 
 
button span { 
 
    position:relative; 
 
    z-index:3; 
 
} 
 
button::before, button::after { 
 
    border-radius: .3em; 
 
    content: ''; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
button::before { 
 
    background-color: #0070c9; 
 
    top: 0; 
 
    z-index: 2; 
 
} 
 
button::after { 
 
    background-color: #005496; 
 
    bottom: -.2em; 
 
    z-index: 1; 
 
} 
 
button:active, button:focus { 
 
    outline: none; 
 
} 
 
button:active span { 
 
    bottom: -.2em; 
 
} 
 
button:active::before { 
 
    z-index:2; 
 
    background:none; 
 
} 
 
button:active::after{ 
 
    z-index:1; 
 
    background-color: #0070c9; 
 
}

<button><span>Button</span></button>