At this point, we all know why spriting is important. And if you’ve used the technique in a few real world projects, you also probably know they can be a pain. The most flexible approach (at least in the short-term) is to use empty span elements wherever you need an icon, then style those up with CSS. Of course, that’s not semantic at all and could become hard to maintain. If you go the semantic route and use CSS exclusively for your spriting needs, you quickly realize that you need to very carefully construct your sprite map lest your images interfere with each other. Then, when you find out you need to add a few icons to the sprite, you cry.
The good glorious news is that it’s possible to have the best of both worlds by using CSS pseudo elements.
more