How can I change the color of :before on hover of another element?

Question

Here is my code:

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>

Now I need to make that icon red too on hover of <span>. How can I do that?

score 1 · Answer 1 · answered Apr 14 '18 at 13:35

if you want just the before elem to change color :

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>

Zuber · Answer 2 · 2018-04-14T13:45:26.027

1

Add little css and you are done

span:hover:before {
  color: red;
}

Here is the snippet

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>

edited Apr 14 '18 at 13:45

answered Apr 14 '18 at 13:39

Zuber

3,393
1
19
34

Thank you .. upvote – Martin AJ Apr 14 '18 at 17:22
Welcome :) @MartinAJ – Zuber Apr 15 '18 at 06:40

score 0 · Accepted Answer · answered Apr 14 '18 at 13:35

Use following selector:

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

Demo:

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>

How can I change the color of :before on hover of another element?

3 Answers3