'：hover'要素スタイルを ':: after'要素にどのように適用できますか？

Question

CSSを使用してリボンの背景を作成しました。そこにソーシャルメディアのアイコンが重ねられています。リボンは2つの部分で構成されています。上半分は正方形であり、下半分は「フリルビット」が存在する場所である。コードは次のとおりです。

#facebook-icon{ 
    background-color: #7d4826; 
    color: #ffffff; 
    padding-top: 23px; 
    padding-left: 10px; 
    padding-right: 25px; 
    margin-right: 5px; 
} 

#facebook-icon::after{ 
    content: ""; 
    position: absolute; 
    padding-top: 10px; 
    border-bottom: 18px solid transparent; 
    border-left: 17px solid #7d4826; 
    border-right: 18px solid #7d4826; 
    margin-left: -10px; 
} 

ユーザーが画像をスクロールすると、リボンの色が変わります。これを行うには、次のコードを挿入しました：

#facebook-icon:hover{ 
    color: #7d4826; 
    background-color: lavender; 
} 

これはリボンの上半分にのみ影響します。下半分に同じ効果を与えるために、私は次のコードを適用しました：

#facebook-icon::after:hover{ 
    color: #7d4826; 
    background-color: lavender; 
} 

残念ながら、これはうまくいきませんでした。誰でも回避策を認識していますか？

Answer 1

スワップするだけで、ユーザーが＃facebook-iconを使用して要素にカーソルを合わせると、:: after部分も変更されます。プランナーを作成した場合、私はあなたのために変更を適用することができ、それもHTMLを見ることになります:)

#facebook-icon:hover::after{ 
    color: #7d4826; 
    background-color: lavender; 
}