List Styles

The amount of customization you can do to lists is surprising given how simple they first appear to be. This page covers the two most popular types of list. Ordered lists using <ol> use numbering for the bullets and unordered lists, <ul> are bulleted lists.

(There are also description lists that use <dl> with description term and description details tags as children: <dt>, <dd>.)

Fixing the start number

You can start an ordered list at any number you like using start="14":

<ol start="3">
    <li>some text for item 3..</li>
</ol>

List style types and numbers

You can change bullet in an unordered list and the method of counting in ordered lists using the list-style property.

There are long list of options. Here are a few of them:

ol {
    list-style-type: decimal;
    list-style-type: decimal-leading-zero;
    list-style-type: lower-roman;
    list-style-type: lower-greek;
    list-style-type: lower-latin;
    list-style-type: lower-alpha; /* a, b, c .. */
    list-style-type: upper-alpha; /* A, B, C .. */
    list-style-type: mongolian;
}

For unordered lists:

ul {
    list-style-type: disc;
    list-style-type: circle;
    list-style-type: square;
    list-style-type: space-counter; /* defined with @counter-style */
    list-style-type: '-';  /* any string value */
}

See the Pen This Pen by team (@team) on CodePen.

NB. The list-style property is short for the following 3 properties:

1. list-style-image

2. list-style-position

3. list-style-type

4. You can style the bullet in both unordered and ordered lists with the pseudo element ::marker. In fact it works on any element set to display: list-item;.

It can be styled with color, all font properties, white-space, content (which can be used with emoji for the bullet), and animation and transition properties.

You can reverse the counting order by simply adding the key word reversed to the <ol> tag.

NB. The list is in the same order as it is in the HTML. The only difference is the count order.

<ol reversed style="list-style-position: inside" start="100">
    <li>the first <code>li</code> in the html</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ol>

Padding

Adding padding-left to the <li> elements pushes the bullets further away which can be useful sometimes.

• Lorem ipsum dolor sit
• This item has padding-left set to 3em.
• Fugiat enim deleniti assumenda iusto

list-style-position

This CSS property takes the values outside (the default) or inside.

Bullets

You can use list-style-image or add an image using a background-image on li::before. This latter method is a bit more code but far more flexible.

For more on lists see the CSS Tricks article.

::marker

The ::marker pseudo element is a way of styling the bullet points in a list. Although similar to ::before and ::after the list of properties it can take is more limited. It can take any font properties and other than that the main ones are content, transform, transition and color.

The content property can take a unicode character pasted in directly or use its a hex number preceded by a backslash:

li::marker {
    content: '➜ ';
}
li::marker {
    content: '\279C';
}

This can typically be too close to the list items content. If you pasted in the character directly just add a space. But if you used the hex value a space cannot be added to the content. And because ::marker won’t take padding or margins you need to change the <li>’s left padding to separate it.