• Home
• About
• Downloads
• Tutorials
• Articles
• Templates
• Resources
• RSS Feeds
• Affiliates
• Contact

Tutorials > CSS > Custom Bullets

 

Get rid of boring circle bullets in lists with your own creative ones.

Bullets are used as markers in html lists of data. Bullets are not limited to circles, squares, discs, and even roman numerals. Bullets can be just about anything by using CSS to create custom bullets from images.

To begin, a list must first be made.

Code:
------------------------------------------------------------------------
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
------------------------------------------------------------------------

Now open a style sheet and create a style sheet rule. (li.newbullet). Next type list-style-image:. Then type url(image.gif) where image.gif is the url to the image you would like to use as your new bullets. Your CSS code should look similar to the one below.

Code:
------------------------------------------------------------------------
<style type="text/css">

li.newbullet {
list-style-image:url(http://www.depiction.net/images/arrow.gif)
}

</style>
------------------------------------------------------------------------

Next apply the CSS rule to each bullet you would like it to be applied to. (This is the final code.)

Code:
------------------------------------------------------------------------
<ul>
<li class="newbullet">List item one</li>
<li>List item two</li>
<li class="newbullet">List item three</li>
</ul>
------------------------------------------------------------------------

Your final list should look like the following.

• List item one
• List item two
• List item three