HTML Lists with image bullets using clip property using CSS

Total Post:110


 1835  View(s)
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">
   <li class="one">One</li>
   <li class="two">Two</li>
   <li class="three">Three</li>
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 {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. 



Please check, If you want to make this post sponsored

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