CSS image replacement using pseudo-elements.

nir.css

/**
 * Image replacement
 *
 * 1. Dimensions of replacement image
 * 2. Fix for Firefox 2-
 * 3. Required for IE8 if no `a:hover` styles declared
 *
 * Usage:
    <a class="nir" href="[url]">[text]</a>
 *
 * @link: http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/
 */
.nir {
    width: 50px; /* [1] */
    height: 50px; /* [1] */
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.nir:before {
    display: -moz-inline-box; /* [2] */
    display: inline-block;
    font-size: 0;
    line-height: 0;
    content: url('sprite.png');
}
    
.nir:hover:before,
.nir:focus:before,
.nir:active:before {
    margin-top: -50px;
}
    
a:hover {
    cursor: pointer; /* [3] */
}

shame.css

/**
 * Fallback for IE7-
 *
    <!--[if lt IE 8]> <![endif]-->
 *
 */
.nir {
    text-indent: -9000px;
    background: url('sprite.png') no-repeat;
}

.nir:hover,
.nir:active {
    background-position: 0 -50px;
}

/* IE6 hack */
a:hover {
    margin: 0;
}