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

Question

当我将鼠标悬停在链接＆＃34; EN |上时FR＆＃34;，然后所有字符，包括管道字符＆＃39; | ＆＃39;将颜色改为蓝色。

＆＃13;

＆＃13;

inv.SwordInvent[0] = (sword) {"Paper Sword",1,1,1};

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想实现只有链接EN和FR在鼠标悬停时变为蓝色，除了管道字符的颜色＆＃39; | ＆＃39;就在他们之间。

我正在寻找类似的东西：

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

保持管道特征＆＃39; | ＆＃39;灰色。

我怎样才能做到这一点？

更新：

感谢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

Answer 2

只需将您想要的颜色添加到现有的::before声明中：

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

jsFiddle

Answer 3

我只是将管道字符作为常规字符插入链接之间，并且没有任何CSS规则：

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