CSS Custom Bullets Example

CSS list handlers allow you to change various properties of your list. You can, for instance, choose an image instead of the standard bullet, set a different marker for your unordered list (such as a square instead of the default circle) or change the numbering style of ordered lists. Here are a few examples.

HTML Example:

One
Two



Three
Four



Five
Six

 

CSS Example:

#imageBullet {
list-style-image: url("/images/neutral/penny.jpg");
margin-left: 100px;
}

#squaredBullet {
list-style-type: square;
}

#greekNumbers {
list-style-type:lower-greek;
} 

Result:

• One
• Two

• Three
• Four

1. Five
2. Six