RhinoFreak RhinoFreak - 4 months ago 14
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>

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 >
< 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

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:

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