StandardNerd StandardNerd - 11 months ago 49
CSS Question

Prevent pseudo-element content from changing color on hover

When I mouse over the links "EN | FR", then all characters including the pipe character ' | ' change color to blue.


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


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

I want to achieve that only the link EN and FR turns to blue on mouse over except the color of the pipe character ' | ' that is between them.

I'm looking for something like:

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

to keep the pipe character ' | ' grey.

How can I achieve this?


Thanks to Paulie_D I have a working JSfiddle solution

Answer Source

You were close:

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

JSfiddle Demo

Or just declare a color for the pseudo-element directly and let specificty win the fight for you.

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

JSfiddle Demo