CSS List Properties

2008 Oct 17

Property Values Initial Value Applies to Inherited
list-style [ <list-style-image> || <list-style-position> || <list-style-type> ] | inherit refer to specific property elements whose display value is list-item yes
list-style-image <uri> | none | inherit disc elements whose display value is list-item yes
list-style-position inside | outside | inherit outside elements whose display value is list-item yes
list-style-type circle | decimal | decimal-leading-zero | disc | square | lower-greek | lower-latin | lower-roman | upper-latin | upper-roman | armenian | georgian | none | inherit disc elements whose display value is list-item yes

Also see counters as generated content for numbered lists and headings.

list-style-image

CSS+HTML Results 
<ul style="list-style-image: url(li.gif);" >
<li>once</li>
<li>upon</li>
<li>a time</li>
</ul>
  • once
  • upon
  • a time

list-style-position

CSS+HTML Results 
.l_in { list-style-position: inside; border: 1px solid; }
.l_out { list-style-position: outside; border: 1px dashed; }
...
<ul>
<li class=l_in>inside<br>next
<li class=l_out>outside<br>after
</ul>
  • inside
    next
  • outside
    after

Besider border the margin and padding properties are also available to change. The position of the marker is defined by something like:

position: absolute; left: -1.5em;

Different browsers have different definitions of where the the background of a list is when shading or filling with an image. Some include the marker and some do not (see example). This is because some browsers (e.g. Firefox), as default use:

ul, ol { margin-left: 40px; >

and others (e.g. IE, Opera) use:

ul, ol { padding-left: 40px; >

It would be better to use 2.5em rather than 40px to scale with font size.

list-style-type

Unrecognized values are treated as decimal.

circle disc square decimal decimal-
leading-
zero		 lower-
roman		 upper-
roman
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
lower-
greek		 lower-
latin		 upper-
latin		 armenian georgian none
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _
  • _

The nesting order can be specified in the style as follows
(although there are some browser dependencies here):

CSS+HTML Results 
ul { list-style-type: disc; }
ul ul { list-style-type: square; }
ul ul ul { list-style-type: circle; }
...
<ul style="background: #CCCCFF;">
<li>L1
  <ul>
  <li>L2
    <ul>
    <li>L3
    </ul>
  </ul>
</ul>
  • L1
    • L2
      • L3