How to style ordered and unordered lists with CSS

CSS allows full customization of ordered and unordered lists to enhance readability and design consistency. You can change default markers using the list-style-type property, such as setting unordered lists to use square, circle, or no bullets, and ordered lists to use numbering styles like decimal, lower-alpha, or upper-roman. To remove markers entirely, set list-style-type to none, which is common in navigation menus. Custom images can replace default bullets via list-style-image, though using a background image on li elements offers better control over alignment and spacing. Adjusting layout and spacing with margin and padding ensures visual clarity, but default browser styles should be reset for cross-browser consistency. For advanced designs, pseudo-elements like ::before enable fully custom bullets or counters; for example, creating circular bullets with background colors or implementing step-by-step numbering with custom text such as "Step 1:" using CSS counters. Responsive design considerations include reducing padding and bullet size on smaller screens using media queries to prevent content displacement, ensuring usability across devices. Ultimately, while CSS provides extensive styling options, it's essential to balance aesthetics with accessibility and readability.

Styling ordered and unordered lists in CSS is a common task that helps improve readability and design consistency on web pages. By default, browsers render lists with basic formatting, but with CSS, you can fully customize their appearance. Here’s how to do it effectively.

Customizing list markers and bullets

By default, unordered lists (<ul></ul>) use disc bullets and ordered lists (<ol></ol>) use numeric counters. You can change these using the list-style-type property.

For unordered lists:

ul {
  list-style-type: square;     /* Options: disc, circle, square, none */
}

For ordered lists:

ol {
  list-style-type: upper-roman; /* Options: decimal, lower-alpha, upper-roman, etc. */
}

If you want to remove bullets or numbers entirely (common in navigation menus):

ul, ol {
  list-style-type: none;
}

Using custom images as bullets

You can replace default bullets with custom images using list-style-image:

ul {
  list-style-image: url('bullet.png');
}

Alternatively, for more control (like consistent alignment), use a background image on the <li> elements:

ul li {
  background-image: url('bullet.png');
  background-repeat: no-repeat;
  background-position: 0 5px;
  padding-left: 20px;
  list-style-type: none;
}

This method gives you better control over spacing and alignment.

Styling list layout and spacing

Adjusting spacing improves readability. Use margin and padding to control the layout:

ul, ol {
  margin: 0;
  padding: 10px 0 10px 30px; /* top, right, bottom, left */
}

li {
  margin-bottom: 8px;
}

Note: Different browsers apply default padding to <ul> and <ol>, so resetting or standardizing this is important for consistency.

Advanced styling with pseudo-elements

For creative designs, use ::before pseudo-elements. This allows full control over bullet appearance using CSS.

Example: Custom circular bullet for unordered list:

ul {
  list-style-type: none;
}

ul li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #007acc;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

For ordered lists, you can even create custom counters:

ol {
  counter-reset: step-counter;
  list-style-type: none;
}

ol li::before {
  counter-increment: step-counter;
  content: "Step " counter(step-counter) ": ";
  font-weight: bold;
  margin-right: 8px;
}

This technique is great for tutorials or processes where you want styled step indicators.

Responsive considerations

On mobile devices, overly wide left padding or large custom bullets can push content too far right. Always test on smaller screens and consider adjusting padding or bullet size:

@media (max-width: 600px) {
  ul, ol {
    padding-left: 15px;
  }

  ul li::before {
    width: 6px;
    height: 6px;
    margin-right: 8px;
  }
}

Basically, CSS gives you full control over list styling — from simple bullet changes to fully custom designs. The key is balancing visual appeal with usability and accessibility.

The above is the detailed content of How to style ordered and unordered lists with CSS. For more information, please follow other related articles on the PHP Chinese website!