How to style lists using CSS

You style lists in CSS with a small family of properties: list-style-type changes the marker, list-style-image replaces it with an image, list-style-position moves it inside or outside the content, and list-style is the shorthand for all three.

Lists are a very important part of many web pages. Navigation menus, article indexes, feature lists: under the hood, they are all ul or ol elements. Let’s see how to control how they look.

Changing the marker

list-style-type is used to set a predefined marker to be used by the list:

li {
  list-style-type: square;
}

We have lots of possible values, which you can see here https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type with examples of their appearance. Some of the most popular ones are disc, circle, square and none.

Ordered lists have their own set of values, like decimal, lower-alpha and upper-roman. Setting upper-roman on an ol makes the items count I, II, III and so on.

Using an image as marker

list-style-image is used to use a custom image as a marker, when a predefined marker is not appropriate:

li {
  list-style-image: url(list-image.png);
}

One thing to know: you can’t resize or align this image with CSS. If the image is too big, the marker is too big. My advice is to prepare the image at the exact size you need it before using it here.

Marker position

list-style-position lets you add the marker outside (the default) or inside of the list content, in the flow of the page rather than outside of it:

li {
  list-style-position: inside;
}

With inside, when a list item wraps to a second line, the text starts under the marker instead of aligning with the first line. Check both options with real content before picking one.

The shorthand

The list-style shorthand property lets us specify all those properties in the same line:

li {
  list-style: url(list-image.png) inside;
}

You can pass the values in any order, and skip the ones you don’t need.

Removing markers entirely

A very common case is removing markers, for example when a ul is used as a navigation menu:

ul {
  list-style: none;
}

Be careful with one thing here: the list still looks indented. That’s because browsers give lists a default padding-left, and list-style: none does not touch it. Remove it explicitly:

ul {
  list-style: none;
  padding-left: 0;
}

Now the list aligns with the rest of your content.