JSFiddle - React, Tailwind, and code Playground

by ariehg

HTML

<ul>
    <li>
        <a id='a1' href='#'><span></span>1</a>        
    </li>
    <li>
        <a id='a2' href='#'><span></span>2</a>        
    </li>
    <li>
        <a id='a3' href='#'><span></span>3</a>        
    </li>
</ul>

CSS

li{display:inline-block; position: relative; height:30px; width:32px;}

/* Here is the important part */
a {z-index:0; display:block;}

a  span{
    /* general dimentions */
    display:block;height:30px; 
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    /* sprites */
    background:url(http://blog.arieh.co.il/images/menu.gif) no-repeat;
}

/* Positioning background */
#a1 span{width:31px;}
#a2 span{width:32px;  background-position:-31px 0;}
#a3 span{ width:34px; background-position:-63px 0;}