ボタンホバー時塗りつぶしを疑似要素も含めてできるようにする

実現したいこと

ボタンをホバーした際に疑似要素で作成をした矢印も含めて色を変更して表示できるようにしたい

前提

今の状態としては以下のコードで作成をしている段階なのですが、文字と背景色の変更はできたのですが疑似要素の矢印の色の変更ができずに困っています。
最初はz-indexの問題やホバーの書くところの問題かなと思ったのですが、疑似要素に触れた時のみホバーはできるもののボタンに触れた時には隠れてしまっている状態です。
このような場合は他の要素（divのなかにspanを入れて矢印を疑似要素ではなく他のもので作成する）で作成した方が良いのでしょうか？

参考サイト→https://push.tokyo/css-border-left-right-animation/

HTML

<div class="contactPage__buttonBox"> <a href="#" class="contactPage__buttonLink button__bgLeft"> <span class="contactPage__buttonLinkText">入力した内容を確認する</span> </a> </div>

SCSS

.contactPage__buttonBox{ width: 392px; margin: 0 auto; padding-top: 70px; padding-bottom: 100px; } .contactPage__buttonLink { position: relative; display: inline-block; padding: 16px 64px; font-size: 1.3rem; margin: 0 auto; text-decoration: none; color: #111; border: 1px solid #111; transition: color .25s ease; &:hover { color: #fff; &::before { transform: scaleX(1); transform-origin: left; } } &::before { position: absolute; top: 0; left: 0; content: ''; display: block; width: 100%; height: 100%; background: $orange; transform: scaleX(0); transform-origin: right; transition: all .25s ease; transition-property: transform; } } .contactPage__buttonLinkText::after:hover{ border-bottom: 1px solid $white; border-right: 1px solid $white; } .contactPage__buttonLinkText::after{ position: absolute; top: 50%; right: -50px; border-bottom: 1px solid $orange; border-right: 1px solid $orange; transform: skew(45deg); content: ""; width: 35px; height: 5px; transition: all .25s ease; &:hover { border-bottom: 1px solid $white; border-right: 1px solid $white; } } .contactPage__buttonLinkText{ position: relative; }

試したこと

１文字と同様にhoverを追加する
２z-indexをつけて文字を前に持ってくるようにする