リンクホバー時に擬似要素の装飾には反応させないためには？ HTML/CSS

Question

こんにちは。
タイトルの通りなのですが、テキストとテキストの間に飾りとして「｜」をつけて、
リンク先ホバー時にテキストを薄くするときに、飾りの「｜」も薄くなってしまいます。
飾りに反応させないようにするにはどうしたら良いでしょうか。
ご教示いただければと思います。

よろしくお願いいたします。

＜イメージ＞
メール　　　｜　　企業情報　　←メールと企業情報の間の｜を擬似要素で表示

<a class="mail" href="#">メール</a>
<a href="#">企業情報</a>

.mail::after {
   content: "|"
   position: absolute;
   left: 200px;
   color: #000;
}

a:hover {
   opacity: 0.6;
}

Answer 1

子要素のみopacityの適用から除外する方法は無いので、spanで括って、spanに適用してはどうでしょうか。

<a class="mail" href="#"><span>メール</span></a>
<a href="#"><span>企業情報</span></a>

<style>
a:hover span{
   opacity: 0.6;
}
</style>

Comments

[yunoco_55]

webgpto様
さっそくありがとうございます！
試してみたところうまくいけました！！
<span>で囲うのは思いつかなかったです。
ありがとうございます！