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

Question

我有一系列使用图标字体和css content:属性呈现的社交图标。

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

在伪前元素中显示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>

Answer 1

试试这个

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

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