Hi Readers!

List items are very commonly used in webpages. Lists can be ordered or unordered. The ordering of the items is very simple, by default. This can be customised with standard CSS. Let us first talk about the ordering of the list items in both ordered and unordered list.

The unordered list bullets can be of 3 kinds :

1. Circle
2. Square
3. Disc

The ordered list can be ordered in various ways. 

1. Numbers
2. Uppercase letters
3. Lowercase letters
4. Uppercase roman numbers
5. Lowercase roman numbers

This was about the ordering of the list items.

But what if we want to change the color of the bullets in unordered list. If you try the color: value; , it changes the color of the text and not the bullets. So, how do you do it? That too, without using a span or a background-image.

The only way to achieve this is by using pseudo classes. They obviously have their own drawbacks. But that's the only way we can do this at present.

Let us see the sample code for this.

HTML :

<ul>
    <li>Mansi</li>
    <li>Manish</li>
    <li>Sudhanshu</li>
</ul>

CSS :

ul li{
    list-style-type: none;
}

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    margin-right: 4px;
    top: 2px;
}

OUTPUT :

Happy Coding :)