StandardNerd StandardNerd - 2 months ago 6
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.

HTML:

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


CSS:

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?

UPDATE:

Thanks to Paulie_D I have a working JSfiddle solution

Answer

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: ' | ';
   color:red;
 }

JSfiddle Demo

Comments