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

Question

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

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

Answer 1

尝试这个

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

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