CODEWITHSUNDEEP
csshoverpseudo-element
Berendschot
Berendschot

Reputation: 3104

Exclude pseudo elements from hover

How do I exclude pseudo-elements like :before and :after from being changed by selectors like for example: :hover?

Maybe there's some sort of 'main pseudo element' that I'm not aware of?

I've tried using CSS3 :not() statement but this didn't work.

Using: .facebook:hover:before {color: black;} works fine, but I'm sure that there's a better solution.

Example: I want the Facebook logo to remain black and change the texts color.

body {
  background: #F7F7F7;
  margin: 0px;
}
.share-button {
  background: #FFFFFF;
  border: 1px solid #D8D8D8;
  display: inline-block;
  font-family: 'Open Sans';
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0px;
  padding: 12px 24px 12px 12px;
  transition: color 1s;
}
.facebook:before {
  display: inline-block;
  height: auto;
  font-family: 'FontAwesome';
  font-size: 12px;
  padding-right: 12px;
  width: auto;
  content: '\f09a';
}
.share-button:hover {
  color: #374D8D;
}
<button class="share-button facebook">
  Share on facebook
</button>

Upvotes: 3

Views: 1268

Answers (1)

BoltClock
BoltClock

Reputation: 723518

The problem here is not that the pseudo-element is being "matched" by the :hover selector per se, but that it is inheriting the color property from the corresponding CSS rule on the element.

That is the reason why you need to set it explicitly on the :before pseudo-element — you cannot block inheritance using a selector, or using a style on the parent or originating element.

Upvotes: 4

Related Questions