You can use the CSS list-style-type property when you need to specify the style of bullets used in your lists. In the next test file one of the possible options is used.
File test.css
ul {
list-style-type: circle;
}
Note: You can use also one of the following values:
– disc
– decimal
– decimal-leading-zero
– square
– lower-roman,
– upper-roman
– lower-greek
– lower-alpha
– lower-latin
– upper-alpha
– upper-latin
– Hebrew
– Armenian
– Georgian
– none
The browsers that don’t provide support for a particular bullet type will display default one instead. If you set list-style-type to none the browser will display the list without bullets, but the list will be intended as if the bullets were there.
You can use the next file to test:
File test.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>How to change bullets on list items with CSS</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
<body>
<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
<li>list item four</li>
<li>list item five</li>
</ul>
</body>
</html>
The next picture shows the result:
Changing of bullets on list items with CSS