如何在悬停另一个元素时更改 :before 的颜色

Question

这是我的代码：

span{
  color: #666;
}
span:before{
	content: "f059";
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
  font-family: FontAwesome;
	color: #999;
  margin-right: 10px;
}
span:hover{
  color: red;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>something</span>

现在我需要在悬停<span>时将该图标也设置为红色。我该怎么做？

Answer 1

如果你只想让之前的 elem 改变颜色：

span{
  color: #666;
}
span:before{
	content: "f059";
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
  font-family: FontAwesome;
	color: #999;
  margin-right: 10px;
}
span:hover:before{
  color: red;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>something</span>

Answer 2

添加小css，你就完成了

span:hover:before {
  color: red;
}

这是片段

span{
  color: #666;
}
span:before{
	content: "f059";
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
  font-family: FontAwesome;
	color: #999;
  margin-right: 10px;
}
span:hover{
  color: red;
}
span:hover:before {
  color: red;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>something</span>

Answer 3

使用以下选择器：

span:hover,
span:hover:before {
  color: red;
}

演示：

span {
  color: #666;
}
span:before{
  content: "f059";
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
  font-family: FontAwesome;
  color: #999;
  margin-right: 10px;
}
span:hover,
span:hover:before {
  color: red;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>something</span>