从悬停中排除伪元素答案

【问题标题】：Exclude pseudo elements from hover从悬停中排除伪元素
【发布时间】：2015-04-24 21:25:58
【问题描述】：

如何排除 :before 和 :after 等伪元素被选择器更改，例如：:hover？

也许有某种我不知道的“主要伪元素”？

我尝试过使用 CSS3 :not() 语句，但这不起作用。

使用：.facebook:hover:before {color: black;} 可以正常工作，但我确信有更好的解决方案。

示例：我希望 Facebook 徽标保持黑色并更改文本颜色。

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>

【问题讨论】：

标签： css hover pseudo-element

【解决方案1】：

这里的问题不是伪元素被:hover选择器“匹配”了本身，而是它从相应的CSS规则继承color属性元素。

这就是为什么您需要在 :before 伪元素上显式设置它的原因 - 您不能使用选择器或在父元素或原始元素上使用样式来阻止继承。

【讨论】：

在.facebook:before 中设置颜色效果很好！
@Maarten1909：确实——我刚刚注意到:hover 规则上只有一个color 声明。