HTML Lists with image bullets using clip property using CSS

Total Post:110


 1805  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. 


  1. Re: HTML Lists with image bullets using clip property using CSS


    This is mostly correct. However, since OP is targeting the bullets, this won't work even if the li are set to absolute. He will need to use: before or :after to get this effect and disable bullets with list-style: none


Please check, If you want to make this post sponsored

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