RhinoFreak RhinoFreak - 5 months ago 32
HTML Question

CSS animated icon before link

In my header I have this arrangement for showing a link and an icon before it using padding.

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


Now I have added an animation for the background image but, obviously, it effects the text “MESSAGES” too.
Is there a way I can make it effect only the background while keeping the same setup and not reverting to using
< img >
before
< a >
?

You can get a rough idea of what I mean/am talking about here http://codepen.io/RhinoFreak/pen/WxbYVY

Much thanks!

Lal Lal
Answer

See this fiddle

Instead of applying the class that does the animation, to the whole <li> you can just add a <span> and apply the class to the <span>.

The updated <li> would be as follows:

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