如何在span元素hover时修改其:before伪元素的颜色？

很简单哦，你现在的代码只给hover状态的span本身设置了红色，但:before伪元素的颜色还是原来的#999，所以需要给hover状态下的:before伪元素单独加样式规则就行啦！

核心就是用span:hover:before这个选择器，它能精准选中被鼠标悬停的span元素的:before伪元素，然后覆盖它的颜色属性。

修改后的完整代码如下：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
span{ 
  color: #666; 
} 
span:before{ 
  content: "\f059"; 
  display: inline-block; 
  vertical-align: middle; 
  font-size: 15px; 
  font-family: FontAwesome; 
  color: #999; 
  margin-right: 10px; 
} 
/* 新增这个规则，hover时同步修改伪元素颜色 */
span:hover{ 
  color: red; 
}
span:hover:before{
  color: red;
}
</style>
<span>something</span>

这样设置后，当你把鼠标悬停在span元素上时，不仅文字会变成红色，前面的FontAwesome图标也会同步变成红色啦！

内容的提问来源于stack exchange，提问作者Martin AJ