HTML Lists with image bullets using clip property using CSS

Total Post:110

 1624  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. Post:105

    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



Enter your email address here always to be updated. We promise not to spam!