html - 防止伪元素内容在悬停时改变颜色

Question

当我将鼠标悬停在链接“EN | FR”上时，所有字符包括竖线字符 ' | ' 将颜色更改为蓝色。

a:hover {
  color: blue;
}
a.language {
  display: inline;
  padding: 0;
}
a.language:last-child:before {
  content: ' | ';
}

 <a class="language" href="/en">EN</a>
<a class="language" href="/fr">FR</a>

我想实现只有链接 EN 和 FR 在鼠标悬停时变为蓝色，管道字符的颜色除外 ' | ' 那是他们之间的事。

我正在寻找类似的东西:

a.language:last-child:before:hover {
    color: grey;
}

保留管道符 ' | ' 灰色。

我怎样才能做到这一点？

更新:

感谢 Paulie_D 我有一个工作 JSfiddle solution

Answer 1

你很接近:

 a.language:last-child:hover::before {
   color: red;
 }

JSfiddle Demo

或者直接为伪元素声明一种颜色，让特异性为您赢得胜利。

 a.language:last-child::before {
   content: ' | ';
   color:red;
 }

JSfiddle Demo