::afterで作成した矢印のリンクに対して:hoverで色を変えたい。

Question

前提・実現したいこと

aタグにborder-bottomで下線を作り、
::afterでさらに線を作って矢印を作成しました。

「商品ページへ」をマウスオーバーすると色が変わるのと同じように、
この２つのパーツも:hoverでrgb(207, 55, 55)に色が変わるようにしたいです。

発生している問題・エラーメッセージ

疑似要素に疑似クラスをつけることはできないようで、
マウスオーバーしたときに::afterで作った線の部分だけ色が変わりません。

どのように解決したら良いでしょうか。。。

該当のソースコード

<p class="picup_link">
　　<a href="#">
　　　　商品ページへ
　　</a>
</p>

.picup_link {
    position: relative;
}
.picup_link a {
    width: 200px;
    border-bottom: 1px solid #000;
    display: block;
    transition: all 0.2s;
}
.picup_link a::after {
    position: absolute;
    content: "";
    left: 175px;
    bottom: 10px;
    width: 30px;
    height: 1px;
    border-top: 1px solid #000;
    transform: rotate(45deg);
}
.picup_link a:hover {
    cursor: pointer;
    border-bottom: 1px solid rgb(207, 55, 55);
    transition: all 0.2s ease;
}

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

下記のコードでいけると思います。

.picup_link a::after {
  /*前略*/

  /*追加*/
  transition: inherit;
}
/*追加*/
.picup_link a:hover::after {
    border-top-color: rgb(207, 55, 55);
}

a::after:hover で書くと、効きません。
transition: inherit; の追加は、擬似要素の変化も親要素とおんなじようにじわっと変わるために必要です。

Comments

[退会済みユーザー]

先日は早々にご回答いただきありがとうございました！
あれから教えて頂いたとおりに試してみたのですが、hover時の:afterの色は変わりませんでした。。
色が変わらなかったのでフワッの動作も確認できず。
何がいけないのか分かりません。。。。

[退会済みユーザー]

あの後迷走しながらもコードをいじっていたら、成功しました！
「.picup_link a::after」は「border-top」なのに、
「.picup_link a 」の「border-bottom」につられてずっとbottomのまま
コードをこねくり回してしていたようです。。！！

そしてそのあとmarlboro_tata様に教えて頂いたコードをコピペしてみたところ、
こちらも成功しました。。！
混乱している頭で試行錯誤をしていたので、
どこかがおかしいままコピペしてしまっていたのかもしれません。

この度は大変勉強になりました！
ご回答下さり本当にありがとうございました！

Answer 2

もう一度最初からコードを１つ１つ打ち直して、確認をしていった。

今回はその最中に
.picup_link a::after では　 border-topを指定しているのに、
.picup_link a:hover::after　では　border-bottomになっていたことに気づいた。
（トライ&エラーを繰り返すうちに誤ってコピペしてしまったと思われる。）

１つ１つのセレクタとプロパティ、プロパティ値を確認することが大切。

---

.picup_link a {
width: 200px;
border-bottom: 1px solid #000;
display: block;
transition: all 0.2s;
}
.picup_link a:hover {
cursor: pointer;
border-bottom: 1px solid rgb(207, 55, 55);
transition: all 0.2s ease;
}
.picup_link a::after {
position: absolute;
content: "";
left: 175px;
bottom: 10px;
width: 30px;
height: 1px;
border-top: 1px solid #000;
transform: rotate(45deg);
}
.picup_link** a:hover::after** {
border-bottom: 1px solid #000;