list-style-type changes the marker in front of each list item.
index.html
HTML
<style>
.a { list-style-type: square; }
.b { list-style-type: circle; }
.c { list-style-type: upper-roman; }
.d { list-style-type: lower-alpha; }
.e { list-style-type: none; padding-left: 0; }
</style>
<ul class="a"><li>square</li><li>square</li></ul>
<ul class="b"><li>circle</li><li>circle</li></ul>
<ol class="c"><li>upper-roman</li><li>upper-roman</li></ol>
<ol class="d"><li>lower-alpha</li><li>lower-alpha</li></ol>
<ul class="e"><li>none</li><li>none</li></ul>Common values
| Value | Looks like |
|---|---|
disc | Filled bullet (default for ul) |
circle, square | Hollow circle, small square |
decimal | 1, 2, 3 (default for ol) |
lower-alpha, upper-alpha | a, b, c / A, B, C |
lower-roman, upper-roman | i, ii, iii / I, II, III |
none | No marker |
Menus and the none value
Navigation menus are lists in HTML, but you rarely want bullets there. Remove the marker and the default left padding (browsers indent lists):
style.css
CSS
.menu { list-style-type: none; padding-left: 0; margin: 0; }
info
Keep the list semantics
Even with
list-style-type: none, a list is still a list for screen readers. Safari with VoiceOver may stop announcing it as a list when the bullets are removed, which is a known quirk. If it matters, add role="list" to the <ul>.