css :before sprites

demo showing use of :before pseudo-class to implement sprites alongside link content

by Scott Godin

HTML

<nav id="sm_icons_full">
<ul>
    <li class="icon_fb"><a class="offsitelink" title="Facebook" href="https://www.facebook.com/Soffritto">Facebook</a></li>
    <li class="icon_tw"><a class="offsitelink" title="Twitter" href="https://twitter.com/Soffritto">Twitter</a></li>
    <li class="icon_gplus"><a class="offsitelink" title="Google+" href="https://plus.google.com/108716121703093171624/">Google+</a></li>
    <li class="icon_igram"><a class="offsitelink" title="Instagram" href="http://statigr.am/soffrittogrill">Instagram</a></li>
    <li class="icon_foursquare"><a class="offsitelink" title="Foursquare" href="https://foursquare.com/v/soffritto-italian-grill/4bfd3e52e529c928aa97ba8c">Foursquare</a></li>
</ul>
</nav>

CSS

#sm_icons_full {}
#sm_icons_full ul {
    margin:0; padding: 0;
}
#sm_icons_full li { 
    list-style-type: none;
    margin: 0.33em 0;
}
#sm_icons_full li a:before {
    content: " ";
    display: inline-block;
    width: 50px; height: 50px;
    vertical-align: middle;
    margin-right: 1em;
    background: transparent url(http://soffritto.com/wp-content/themes/soffrittogrill/images/artwork/SoffrittoSocialMediaIcons3.png) scroll no-repeat 0 0;
}
#sm_icons_full .icon_fb a:before { background-position: 0 0; }
#sm_icons_full .icon_fb a:hover:before { background-position: 0 -50px; }

#sm_icons_full .icon_tw a:before { background-position: -50px 0; }
#sm_icons_full .icon_tw a:hover:before { background-position: -50px -50px; }

#sm_icons_full .icon_gplus a:before { background-position: -100px 0; }
#sm_icons_full .icon_gplus a:hover:before { background-position: -100px -50px; }

#sm_icons_full .icon_igram a:before { background-position: -150px 0; }
#sm_icons_full .icon_igram a:hover:before { background-position: -150px -50px; }

#sm_icons_full .icon_foursquare a:before { background-position: -200px 0; }
#sm_icons_full .icon_foursquare a:hover:before { background-position: -200px -50px; }