Adding bullets from a sprite

Adding bullets from a sprite with IE7 fallbacks

by rdillman

HTML

<ul>
        <li class="q">the lazy brown dog jumps over<br />
            the sleepy log.</li>
        <li class="q">the lazy brown dog jumps over the sleepy log.</li>
        <li class="q">the lazy brown dog jumps over the sleepy log.</li>
        <li class="q">the lazy brown dog jumps over the sleepy log.</li>
    </ul>

CSS

body{
    font-size:16px;
}
li.q{
    background-image: none;
    position:relative;
    margin-left:2em;
    display:block;
    padding:.25em;
}
li.q:before, li.q span{
    display:inline-block;
    content:' ';
    background-position:-550px -195px;
    width:1.25em;
    height:1.25em;
    background-image: url('http://content.everydayhealth.com/sbd2/cms/sprite-icon-v7.png');
    background-repeat: no-repeat;
    position:absolute;
    left:-1.5em;
}

JavaScript

$(document).ready(function() {
    if ($.browser.msie && $.browser.version <= 7) {
        $("li.q").prepend("<span />");
    }
});