CSS – Specify List Item Marker

To specify marker for the list items in a list using CSS, set list-style-type property for the list.

Ordered Lists and Unordered Lists have different set of markers.

Ordered Lists have items that are ordered. Hence, the items are marked with numbers or letters.

For ordered lists, some of the list item markers are mentioned in the following code.

list-style-type: circle;
list-style-type: square;
list-style-type: disc;

Unordered Lists have items where order of items is not considered. Hence, the items are marked with bullets(marker).

For unordered lists, some of the list item markers are mentioned in the following code.

list-style-type: upper-roman;
list-style-type: lower-roman;
list-style-type: upper-alpha;
list-style-type: lower-alpha;

Examples

ADVERTISEMENT

1. Square Marker for List Items

In the following example, we take an unordered list and specify square as list item marker for the items.

index.html

2. Circle Marker for List Items

In the following example, we take an unordered list and specify circle as list item marker for the items.

index.html

3. Upper-roman Marker

In the following example, we take an ordered list and specify upper-roman as list item marker for the items.

index.html

Conclusion

In this CSS Tutorial, we learned how to specify list item marker for items in a list using CSS list-style-type property, with examples. We have covered examples for list item markers like square, circle, upper-roman, etc. You may try with other values.