Html 链接前的CSS动画图标

在我的标题中，我有这样的安排，在使用填充之前显示一个链接和一个图标

<li class="small-icon icon-pm">
    <a href="/messages" role="menuitem">
        <span>MESSAGES</span>
    </a>
</li>

现在，我为背景图像添加了一个动画，但显然，它也会影响文本“消息”。 是否有一种方法可以使其仅在后台生效，同时保持相同的设置，而不恢复到在

之前使用

你可以大致了解我在这里所说的意思

非常感谢
 看到这个了吗
您只需添加一个
，然后将该类应用于
，而不是将制作动画的类应用于整个

更新后的
如下：

  <li>
    <span class="small-icon icon-pm-newerr"></span>
    <a href="#">messages</a>
  </li>

这里有一个
是的，只在
图标pm:：before
上而不是
上执行动画。图标pm
是您想要的吗？@FranciscoPresencia感谢您的快速回复。我试过这样做，但现在我的图标甚至没有出现。你能在codepen.io上做点编辑并给我看看吗？非常感谢@谢谢！这是一种方法，是的，这是一种解决方案，但我的问题（如果不清楚，请抱歉）是在不编辑html的情况下进行，因为很多东西都依赖于它。这很有效，我想没有其他方法了，谢谢，我会进行编辑：）我现在遇到了一个小问题。应用
显示的时刻：内联块它旁边的文本链接向下移动。：/也许这些图片能让你理解我的问题：[link][link]谢谢！我可以给你直接链接的地方，它的应用，但它是一个私人论坛，所以现在我不能！编辑非常感谢：D有效吗
li a,
li span {
  display: inline-block;
  vertical-align: middle;
}