Css 使用伪元素内容时，使社交图标在悬停时更改颜色

我有一系列社交图标，它们使用图标字体和css

content:

属性呈现

.icon-google-plus:before {
    content: "\e003";
}

在伪before元素中显示google plus图标

如何使此图标在悬停时更改颜色？我错误地认为这会是类似的事情

.icon-google-plus:before a:hover {
    colour: @google_plus_red;
}

按要求添加我的标记

<a class="share_styx icon-google-plus" target="_blank" href="https://plus.google.com/share?url={{url absolute="true"}}">
 <span class="hidethis_styx">
    Google+
 </span>
</a>

试试这个

 a.icon-google-plus:hover:before {
    color: red;
}

---

它将更改悬停链接时图标的颜色。

请包含您的HTML标记，选择器的顺序错误，应该更像

a:hover。图标google plus:before

我已经尝试过了。不走运！你能解释一下你是如何知道伪元素应该是什么顺序的吗。e、 g.为什么是

：hover:before

？@Luke，因为：hover事件发生在锚标记（

a

）上，而不是伪元素上。该类也应用于锚标记，而不是伪元素。因此，：在最后