How to have a custom image as list bullet CSS tricks

This article was written by in April 26, 2015, & may not be posted on other sites!
Original source url for this article: How to have a custom image as list bullet CSS tricks

How to have a custom image as list bullet CSS tricks.
You can have any image or animated gif as the list bullet image instead of the classic circle or square bullets. How to have image as list bullet CSS tricks.

How to have image as list bullet CSS tricks and tips

 

How to change the list bullets using CSS

HTML – the basic unordered list:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

CSS – basic bullet options, <ol> is an ordered list using numbers.
ul{
list-style-type: circle;
}

ul{
list-style-type: square;
}

ol{
list-style-type: upper-roman;
}

ol{
list-style-type: lower-alpha;
}

 

CSS custom image or animated gif as list bullet

HTML
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

 

CSS
ul {
list-style-image: url('your-image.gif');
}

or the more cross browser friendly solution:
ul li {
background-image: url(your-image.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px; /*the width of your custom image*/
}

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *