CODEWITHSUNDEEP
htmlcsscss-selectors
StandardNerd
StandardNerd

Reputation: 4183

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: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>

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

Upvotes: 2

Views: 131

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371143

Just add the color you want to the existing ::before declaration:

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

jsFiddle

Upvotes: 3

Johannes
Johannes

Reputation: 67748

I would simply insert the pipe character as a regular character between the links and not have any CSS rule for it:

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

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 114989

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

Upvotes: 3

Related Questions