CSS Styling Lists

CSS Styling Lists

CSS can change the markers, spacing, colors, backgrounds, and overall appearance of HTML ordered and unordered lists.

List-specific properties control marker types, positions, and images, while other CSS properties can style the list and its individual items. CSS also provides the ::marker pseudo-element for directly styling list markers.

list-style-type

The list-style-type property controls the marker displayed beside each list item.

ul {
  list-style-type: square;
}

Unordered lists commonly use markers such as disc, circle, and square.

Ordered List Markers

The list-style-type property can also change the numbering or lettering used by ordered lists.

ol {
  list-style-type: upper-roman;
}

Common ordered-list values include:

list-style-position

The list-style-position property controls whether the marker is placed outside or inside the list item's principal block box.

ul {
  list-style-position: outside;
}

The default value is outside. With outside, the marker is positioned outside the main content box of the list item.

ul {
  list-style-position: inside;
}

With inside, the marker becomes part of the list item's content flow. This difference becomes especially noticeable when a list item wraps onto additional lines.

list-style-image

The list-style-image property can use an image as the list marker.

ul {
  list-style-image: url("marker.png");
}

If the image cannot be displayed, the marker specified by list-style-type can act as a fallback.

ul {
  list-style-type: square;
  list-style-image: url("marker.png");
}

The sizing and positioning options available for list-style-image are limited. When precise control over a custom marker is needed, other techniques such as ::marker or generated content may be more suitable.

Styling the ::marker Pseudo-element

The ::marker pseudo-element selects the marker box of a list item, allowing supported marker properties to be styled separately from the list text.

li::marker {
  color: #0088cc;
  font-size: 1.2em;
  font-weight: bold;
}

This changes the marker without changing the color or size of the list item's text.

The properties that can be applied to ::marker are more limited than those available for a normal element, so it is best used specifically for marker presentation.

list-style Shorthand

The list-style shorthand can combine the list marker type, position, and image in one declaration.

ul {
  list-style: square outside;
}

The shorthand represents the list-style-type, list-style-position, and list-style-image properties.

As with other shorthand properties, omitted values are reset to their initial values, so use the shorthand carefully when other list-style properties have already been set.

Removing List Markers

The none value removes the visible list marker.

ul {
  list-style: none;
}

Browsers normally add indentation to lists, so removing the marker does not necessarily remove the list's left spacing.

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

This pattern is commonly used when a semantic list provides the HTML structure for navigation menus and other interface components that do not need traditional bullets.

List Spacing

Margins, padding, and line height can control the space around a list and between its items.

ul {
  padding-left: 30px;
}
li {
  margin-bottom: 8px;
  line-height: 1.5;
}

The list's left padding provides room for outside markers, while the list-item margin adds vertical separation between items.

Spacing should be large enough to keep list items readable without making related items appear disconnected.

Styling List Items

List items can use the same CSS presentation properties as many other HTML elements.

li {
  margin-bottom: 8px;
  padding: 8px;
  background-color: #f2f2f2;
}

Backgrounds, borders, typography, and spacing can be used to make list items visually distinct.

When backgrounds or borders are added to individual list items, the difference between inside and outside marker positioning can become especially noticeable.

Styling Lists Example

The following example compares an unordered list with custom markers, an ordered list with Roman numerals, and a list with its default markers removed. Open the example in the editor and change the marker types, colors, positions, spacing, or backgrounds to see how the list changes.

.custom-list {
  list-style-type: square;
}
.custom-list li::marker {
  color: #0088cc;
  font-size: 1.2em;
}
.roman-list {
  list-style-type: upper-roman;
}
.no-markers {
  margin: 0;
  padding: 0;
  list-style: none;
}