HTML Lists with image bullets using clip property using CSS

Total Post:110

Points:776

 1835  View(s)
Ratings:
Rate this:
Hi Developers!

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.

Answer

Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.