i

Learn HTML and CSS in 10 Days

List Style Type Values

Values related to ‘list-style-type’ property are as follows:

- none - No list item

- disc- A filled circle

- circle - A hollow circle

- square - A filled square

- decimal - Decimal numbers

- decimal-leading-zero - Decimal numbers padded by initial zeros

- lower-roman- Lowercase roman numerals

- upper-roman - Uppercase roman numerals

- lower-greek - Lowercase classical Greek

- lower-alpha / lower-latin - Lowercase ASCII letters

- upper-alpha / upper-latin - Uppercase ASCII letters

- armenian - Traditional Armenian numbering

- georgian - Traditional Georgian numbering

Using an Image as a List Item Marker

There may be a chance that the default property of ‘list-style-type’ is not enough, and we want to modify our own list item marker. To do this, we need to place a background image in each li> element.

The procedure for this is to get rid of the default value of ‘list-style-type’ property and placing a background image with padding to an element.

HTML

CSS

li {

  background: url("arrow.png") 0 50% no-repeat;

  list-style-type: none;

  padding-left: 12px;

}