非前端专业人士，最近客串前端开发，遇到一个 hover 特效导致抖动的问题，网上搜索了一下，一般都说的是 hover 添加 border 时会抖动，但我的情况并非如此。经过反复检查测试，发现是 before 伪类的问题。

出问题的 Css 和 Html 代码如下，重点就是 .sound 的 before 伪类和 hover，要实现鼠标 hover 时，图标和文字标题的颜色都发生变化。效果实现了，但是鼠标第一次放上去的时候，偶尔会抖动一下。

.news-list li .sound:before{content:url(../images/sound-filling-fill.png)}
.news-list li a,.news-list li span{font-size:14px}
.news-list li:hover a{color:#e8381f!important}
.news-list li:hover .sound:before{content:url(../images/sound-filling-fill-orange.png)}

<li class="border-bottom py-2 d-flex align-items-start">
<li class="border-bottom py-2 d-flex align-items-start">
	<i class="sound"></i>
	<a class="text-dark flex-grow-1 pl-1" href="https://www.02405.com" >新闻标题</a>
	<span>05-19</span>
</li>

解决办法就是不使用 content 属性来设置图标，改为使用 background 来实现，这样就不会抖动了，修改后的 Css 代码如下：

.news-list li .sound:before{
    background:url(../images/sound-filling-fill.png);
    content:"";
    height:20px;
    width:20px;
    display: block;
}
.news-list li a,.news-list li span{font-size:14px}
.news-list li:hover a{color:#e8381f!important}
.news-list li:hover .sound:before{background:url(../images/sound-filling-fill-orange.png)}
(adsbygoogle = window.adsbygoogle || []).push({});