擬似要素へのhoverがうまく機能しません

Question

黒い部分にホバーすると、白文字の部分が全てオレンジ色にふわっと変化して、ホバー解除後は、
ふわっと白に戻ると言うものを実装したいと思っています。
試行錯誤して、Qろアコーディオンの部分は上記の実装が出来たのですが、
右の矢印だけがオレンジ色に変わりません。
何が問題なのでしょうか？
お手数ですがよろしくお願いします。

該当ページ

<section class="faq1-content">
  <div  class="faq1-content-wrap">
    <div class="acc">
      <div class="acc-outer">
        <h2>アコーディオン1</h2>
      </div>
      <div class="acc-inner">コンテンツ1</div>
      <div class="acc-outer">
        <h2>アコーディオン2</h2>
      </div>
      <div class="acc-inner">コンテンツ2</div>
      <div class="acc-outer">
        <h2>アコーディオン3</h2>
      </div>
      <div class="acc-inner">コンテンツ3</div>
    </div>
  </div>
</section>

.faq1-content {
  padding: 40px;
  height: auto;
  background-color: #E2FAFF;
}

.faq1-content-wrap {
  max-width: 1080px;
  margin: 0 auto;
  color: white;
}

.faq1-content-wrap .acc {
  width: 90%;
  margin: 0 auto;
  font-weight: bold;
}

.faq1-content-wrap .acc-outer {
  padding: 0px 10px;
  margin-top: 2px;
  background-color: black;
  border: 2px solid black;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: left;
  color: #fff;
}

.faq1-content-wrap .acc-outer:hover {
  color: orange;
}

.faq1-content-wrap .acc-outer:before {
  content: "Q";
  font-size: 48px;
  padding-right: 20px;
}

.faq1-content-wrap .acc-outer:after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.faq1-content-wrap .acc .open:after {
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.faq1-content-wrap .acc-inner {
  padding: 10px;
  background-color: green;
  border: 2px solid black;
  display: none;
}

.acc-outer h2 {
  font-size: 23px;
  font-weight: bold;
  margin-bottom: 0px;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.acc-outer:after {
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.acc-outer:before {
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

Answer 1

右端の下三角印は .faq1-content-wrap .acc-outer:after で定義され、borderを利用して作成されていることは理解できているかと思います。
現状hover時はcolorしか変更していません。
hover時に当該疑似要素のborder色を変更するようにcssを修正すれば下三角印もオレンジ色に変更されるでしょう。