CSS List Styles

HTML unordered lists are characterized by 

 elements within a 

 tag. The default styling of these unordered lists indicates that each individual list item is to follow a round bullet symbol, but the list-style-type property does take other values. Setting the list-style-type value to circle, for example, will cause the default bullet styling to be replaced by a circle, and list-style-type: square replaces the default bullet with a square.

list-style-type: circle;

Shapes aren’t the only options to choose from. You can use list-style-type: decimal to replace the default styling with sequential numbers, list-style-type: upper-latin for the default styling to be replaced with sequential letters (uppercase, for lowercase use lower-latin). You can also use upper-roman or lower-roman for sequential roman numerals (in upper or lower case, respectively). There’s also always the option to use list-style-type: none to get rid of the default styling all together.

Another way to customize the li elements of the 

 

tag is by using the css :beforepseudo-selector with the content property. Set the list-style-type of the 

 to none, then use the li selector with :before to set the content to be any symbol you like, which will make your symbol of choice appear before all the list items, just like the default bullet styling would. The css should look something like this:

ul{
    list-style-type: none;
}

li:before{
    content: "^";
    position: absolute;
}