a：before要素でホバーの背景色を変更するにはどうすればよいですか？

Question

私のプロジェクトを参照してください：http://www.livingthelighterlife.com/

ソーシャルメディアセクションのホバー色の背景色を取得しようとしています。アイコンは：beforeタグで表示されます。私は追加しようとしました：前：ホバーが動作していません。

追加：私はそれぞれの間にダッシュが現れる理由を理解できないようです。これも修正してください！

助けていただけたら幸いです！

[class^="icon-"]:before, [class*=" icon-"]:before { 
 
\t display: inline-block; 
 
\t line-height: 1em; 
 
\t width: 1em; 
 
\t font-family: "fontello"; 
 
\t font-size: 20px; 
 
\t color: #ffffff; 
 
\t font-weight: normal; 
 
\t text-align: center; 
 

 
\t padding: 5px; 
 
\t padding-left: 6px; 
 
\t border-radius: 50%; 
 
} 
 

 
.icon-rss:before, .icon-pinterest:before, .icon-twitter:before { 
 
\t background: #4a4947; 
 
} 
 

 
.icon-rss:before:hover, .icon-pinterest:before:hover, .icon-twitter:before:hover { 
 
\t background: #f15c58 !important; 
 
} 
 

 
.icon-facebook:before, .icon-instagram:before, .icon-heart:before { 
 
\t background: #f15c58; 
 
} 
 

 
.icon-facebook:before:hover, .icon-instagram:before:hover, .icon-heart:before:hover { 
 
\t background: #4a4947; 
 
} 
 

 
.icon-rss:before { content: '\e801'; } /* '' */ 
 
.icon-facebook:before { content: '\f30c'; } /* '' */ 
 
.icon-pinterest:before { content: '\f312'; } /* '' */ 
 
.icon-instagram:before { content: '\f32d'; } /* '' */ 
 
.icon-twitter:before { content: '\f309'; } /* '' */ 
 
.icon-heart:before { content: '\e802'; } /* '' */

<span class="icon-rss"></span> 
 
</a> 
 

 
&nbsp; 
 

 
<a target="new" href="#"> 
 
<span class="icon-facebook"></span> 
 
</a> 
 

 
&nbsp; 
 

 
<a target="new" href="#"> 
 
<span class="icon-pinterest"></span> 
 
</a> 
 

 
&nbsp; 
 

 
<a target="new" href="#"> 
 
<span class="icon-instagram"></span> 
 
</a> 
 

 
&nbsp; 
 

 
<a target="new" href="#"> 
 
<span class="icon-twitter"></span> 
 
</a> 
 

 
&nbsp; 
 

 
<a target="new" href="#"> 
 
<span class="icon-heart"></span>

Answer 1

それは周りに他の方法です：.icon-rss:hover:beforeとダッシュを削除するaタグにtext-decoration: noneを追加します。

編集：または、a:hover spanのspanの背景色を変更することもできます。