CSS link 之前的动画图标

Question

在我的 header 中，我有这样的安排，用于显示一个 link 和一个使用填充的图标。

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

现在我为背景图像添加了动画，但显然，它也会影响文本“MESSAGES”。 有没有办法让它只影响背景，同时保持相同的设置，而不是在 < a > 之前恢复使用 < img > ？

你可以大概了解我mean/am这里说的是什么http://codepen.io/RhinoFreak/pen/WxbYVY

非常感谢！

Answer 1

看到这个fiddle

不是将执行动画的 class 应用到整个 <li>，您只需添加一个 <span> 并将 class 应用到 <span>.

更新后的 <li> 如下：

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

更新

要使 <a> 垂直居中，请按如下所示稍微更改 CSSa

li a,
li span {
  display: inline-block;
  vertical-align: middle;
}

这是一个fiddle