Animated Icon Before Link

[Rhino.Freak]

Hello everyone!
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> ? (I’m guessing not but I’ll wait for experts)

Much thanks!

[Beverleyh]

Do you mean a :before pseudo element? Why would you not be able to use a :before (or :after) pseudo element (on the ‘li’ or ‘a’ element)?

I think we would need to see a CodePen demo of what you’re working with, and for example, if the animation only displays when a list item is hovered.

[Rhino.Freak]

http://codepen.io/RhinoFreak/pen/WxbYVY

This will give you the idea of what I’m working on. I don’t want the animation to effect the text, is there any way to stop the animation from effecting the text without editing the html?

[Beverleyh]

If this is what you mean, psuedo elements are the way to go http://jsbin.com/butoxisiwi/edit?html,css,output

I only did .icon-pm-newerr (plus changes to li and a)

[Paulie_D]

It’s worth mentioning that the br tags in a ul are invalid HTML too.

[Beverleyh]

Yup. I forgot to mention that I took those out of my JSBin too :)

[Rhino.Freak]

thanks a lot.
:)

[Author]

Posts