SO Answer: CSS Sprites limitation

An answer to http://stackoverflow.com/questions/9191393/css-sprites-limitation

by Meligy

HTML

Assuming you have this picture to use as sprite, which is a 36px * 36px pic (4 sprites, each of 18px * 18px):
<div>
    <img src="http://www.waterbobble.com/skin/frontend/bobble/default/images/round_arrow_sprite.gif" title="sprite" />
</div>
Hover on the link to see the sprite change.

<a href="#">Sample code</a>

CSS

a {
    display:block;
    padding:0 15px 0 0;
}

a:after {
    content: " ";
    display:inline-block;
    width:18px;
    height:18px;
    overflow:hidden;
    vertical-align:middle;
    margin-left:0.5em;
    background: url(http://www.waterbobble.com/skin/frontend/bobble/default/images/round_arrow_sprite.gif);
    background-position: 0 0;
}
a:hover:after {
    background-position: 18px 18px;
}