CSS: Using a different image in list bullets

We can use a different image as a bullet for our lists, just using something like this:

.myCustomList li { list-style-image:url('imgs/Bullet.jpg');}

So nice, unfortunately that css property has its limitations and may not fit our purposes if the image is too big or we want to show it in a special way, in that case, its better to go for the background property and make a fake bullet:

ul.myCustomList {margin:0;padding:0;}
.myCustomList li {list-style:none;background:url('imgs/Bullet.jpg') left 5px no-repeat;padding-left:20px;}

Leave a Reply

Close Bitnami banner
Bitnami