---
title: "HTML Lists with image bullets using clip property using CSS"  
description: "HTML Lists with image bullets using clip property using CSS"  
author: "Anonymous User"  
published: 2013-08-19  
updated: 2013-08-19  
canonical: https://www.mindstick.com/forum/1407/html-lists-with-image-bullets-using-clip-property-using-css  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# HTML Lists with image bullets using clip property using CSS

Hi [Developers](https://www.mindstick.com/articles/12875/blunders-you-must-avoid-while-hiring-java-developers-to-get-the-best-fulfilling-your-needs)!

Is it possible to create [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) [lists](https://www.mindstick.com/articles/126273/books-commonly-found-on-college-reading-lists) with [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) bullets using the clip [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp)? I've been [trying](https://answers.mindstick.com/qa/93698/6-mistakes-couples-are-trying-to-save-money) to get it to work but I can't seem to get it [right](https://www.mindstick.com/articles/12766/check-whether-you-are-doing-digital-transformation-right-or-not).

I would appreciate some assistance.

Here is my initial HTML [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii):

```
<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](https://answers.mindstick.com/qa/93284/what-can-we-write-in-about-us-column-in-basic-info-profile) for clip property, in my actual CSS I have real [pixel](https://www.mindstick.com/interview/33859/how-to-create-pixel-counter-in-javascipt) values. This is just to illustrate what I'm doing.

Kindly assist if you can.

Thanks.

## Replies

### Reply by shreesh chandra shukla

Hi!

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


---

Original Source: https://www.mindstick.com/forum/1407/html-lists-with-image-bullets-using-clip-property-using-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.