Question

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

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

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

你可以大致了解我的意思/我在这里谈论http://codepen.io/RhinoFreak/pen/WxbYVY

非常感谢！

Answer 1

请参阅此fiddle

您可以添加<li>并将该类应用于<span>，而不是将执行动画的类应用于整个<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;
}