Is it possible to create HTML lists with image bullets using the clip property? I've been trying to get it to work but I can't seem to get it right. 

I would appreciate some assistance. 

Here is my initial HTML code: 

<div class="my-clip-list">
<ul>
   <li
class="one">One</li>
   <li
class="two">Two</li>
   <li
class="three">Three</li>
</ul>
</div> 
And my initial CSS: 
.my-clip-list {position: relative;}
.my-clip-list ul {position: absolute;}
.my-clip-list ul li {line-height: 24px;
content:url([url_of_sprite]);}
.my-clip-list ul li.one {clip: rect(top right bottom left)}
.my-clip-list ul li.two {clip: rect(top right bottom left)}
.my-clip-list ul li.three {clip: rect(top right bottom
left)} 

I did this but it doesn't seem to be working. Please note that I have put in the generic info for clip property, in my actual CSS I have real pixel values. This is just to illustrate what I'm doing. 

Kindly assist if you can. 

Thanks.