Your Guide to CSS List Styles [+ Other Ways to Style Lists]

Lists are the unsung heroes of the web. From simple bullet points to complex navigation menus, they play a crucial role in organizing and presenting content. But all too often, their design is an afterthought.

According to a study by the Nielsen Norman Group, users often scan webpages in an F-shaped pattern, focusing on the left side of the content. This makes well-formatted lists essential for drawing the eye and conveying key information.

But how do you take your lists from bland to stunning? Enter CSS list styles. With a few lines of code, you can transform your bullet points into eye-catching design elements that enhance both the form and function of your content.

In this guide, we‘ll explore the ins and outs of styling lists with CSS. We‘ll cover everything from basic bullet styles to advanced techniques like using custom markers and images. By the end, you‘ll have all the tools you need to create lists that inform, engage, and delight your users.

The Anatomy of a List

Before we dive into styling, let‘s review the basic HTML structure of a list. There are three main elements:

• <ul>: The unordered list element, used for lists where the order doesn‘t matter (e.g., a shopping list)
• <ol>: The ordered list element, used for lists where the sequence is important (e.g., a recipe)
• <li>: The list item element, which holds the actual content and nests inside a <ul> or <ol>

Here‘s a simple unordered list in action:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

And an ordered list:

<ol>
  <li>Preheat the oven</li>
  <li>Mix the ingredients</li>  
  <li>Bake for 30 minutes</li>
</ol>

By default, most browsers will display <ul> items with disc markers (bullets) and <ol> items with decimal numbers. But with CSS, we can customize these markers to fit our design.

Choosing the Right List Style Type

The quickest way to change the appearance of list markers is with the list-style-type property. This property sets the shape or sequence of the marker, and it works on both <ul> and <ol> elements.

For unordered lists, some common list-style-type values include:

• disc: A solid circle (the default)
• circle: A hollow circle
• square: A solid square
• none: No marker is shown

ul {
  list-style-type: square;
}

For ordered lists, you can choose from different numbering styles:

• decimal: Regular numbers (the default)
• decimal-leading-zero: Numbers padded with zeros (01, 02, etc.)
• lower-roman: Lowercase Roman numerals (i, ii, iii, etc.)
• upper-roman: Uppercase Roman numerals (I, II, III, etc.)
• lower-alpha: Lowercase ASCII letters (a, b, c, etc.)
• upper-alpha: Uppercase ASCII letters (A, B, C, etc.)

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

See the Pen CSS List Styles – Types by HubSpot (@hubspot) on CodePen.

But why limit yourself to the default options? With a little creativity, you can use symbols, emojis, and even custom characters as markers:

ul {
  list-style-type: ‘✨‘;
}

The key is to choose a marker that enhances the content and aligns with your brand. For example, a checkmark symbol (✔) could work well for a to-do list, while an arrow (→) might be fitting for a list of links.

When selecting a list-style-type, also consider the legibility and accessibility of your markers. Ensure there is enough contrast with the background and that the marker is easily distinguishable from the text.

Using Custom Markers with list-style-image

Want to take your list markers to the next level? The list-style-image property allows you to use a custom image as the marker instead of a simple shape.

ul {
  list-style-image: url(‘heart.png‘);
}

This technique is perfect for adding visual interest and reinforcing your site‘s theme. For example, a recipe blog might use a fork and knife icon for ingredient lists, while a travel site could mark destination lists with a airplane or suitcase icon.

When using list-style-image, there are a few best practices to keep in mind:

1. Use a square image: For best results, your marker image should be square or circular. This ensures it will align nicely with the list text.

2. Keep it small: Markers should be small enough to not distract from the content. Aim for an image size of 16×16 pixels or less.

3. Provide a fallback: In case the image fails to load, always specify a list-style-type as a fallback:

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

That way, users will still see a default bullet instead of no marker at all.

4. Optimize for performance: Like all web images, list marker images should be optimized for fast loading. Use web-friendly formats like PNG or SVG, and compress your files to minimize their size.

By following these guidelines, you can create custom list markers that enhance your content without sacrificing usability or performance.

Positioning Markers with list-style-position

By default, list markers are positioned outside the list item‘s content box. This means the text wraps below the marker, like this:

• List item 1
• List item 2
• List item 3

But what if you want the text to align with the marker instead? That‘s where the list-style-position property comes in.

Setting list-style-position: inside moves the marker inside the content box:

ul {
  list-style-position: inside;  
}

Now the list will render like this:

• List item 1
• List item 2
• List item 3

This technique can be useful for saving space or creating a cleaner, more modern look. However, be aware that it can also make the list harder to scan, especially for longer items that wrap to multiple lines.

As with all design choices, consider the trade-offs and choose the positioning that best suits your content and layout.

Styling Markers with ::marker

For the ultimate in flexibility, you can use the ::marker pseudo-element to style list markers directly. This relatively new feature allows you to treat markers like any other element on the page.

With ::marker, you can control the color, size, spacing, and even content of your markers:

li::marker {
  color: navy;
  font-size: 1.2em;
  content: ‘👉 ‘;
}

See the Pen CSS List Styles – ::marker by HubSpot (@hubspot) on CodePen.

Some creative ways to use ::marker include:

• Changing the marker color on hover: Use the :hover pseudo-class to make markers interactive.
• Using emojis or symbols as markers: The content property lets you replace the default marker with any Unicode character.
• Setting a background color or image: Combine ::marker with other CSS properties to create eye-catching designs.

Of course, with great power comes great responsibility. When styling markers, always prioritize readability and accessibility. Ensure your colors have sufficient contrast and avoid using markers that could be confused with the content itself.

Also, keep in mind that ::marker has limited browser support compared to other list styling properties. Be sure to test your designs thoroughly and provide fallbacks for older browsers.

Putting It All Together with list-style

If you want to set multiple list styling properties at once, the shorthand list-style property is your friend. It combines list-style-type, list-style-image, and list-style-position into a single declaration.

For example, to set a custom image marker positioned inside the content box, you could write:

ul {
  list-style: url(‘marker.png‘) inside;
}  

Or to style a numbered list with Roman numerals and a default disc fallback:

ol {
  list-style: upper-roman disc outside;  
}

The list-style shorthand is not only more concise but also more flexible. You can provide one, two, or all three values in any order, and omitted values will revert to their defaults.

For maximum control and maintainability, consider using list-style in combination with ::marker. This allows you to set global styles for your lists while still customizing individual markers as needed.

Real-World Examples and Inspiration

Now that you know the basics of styling lists with CSS, let‘s look at some real-world examples for inspiration.

1. Themed Marker Icons

In this example, a recipe site uses custom utensil icons to mark different sections of the ingredients list. The fork icon denotes staple pantry items, while the knife icon indicates fresh ingredients to be chopped.

Using distinct markers for different types of content helps users quickly scan and understand the list. Plus, the themed icons reinforce the site‘s brand and create a more immersive experience.

2. Interactive Hover Effects

Here, a navigation menu uses CSS transitions to animate the markers on hover. When the user hovers over a list item, the arrow marker shifts to the right, drawing attention to the link.

This subtle interaction adds a touch of delight and makes the menu feel more engaging. Just be sure to keep animations subtle and brief to avoid distracting from the content.

3. Responsive Marker Positioning

In this example, a blog post uses list-style-position: inside to save space on mobile devices, then switches to the default outside positioning on larger screens.

By adjusting the marker position based on the viewport size, the content remains easy to read and scan at any screen size. This is a great example of using responsive design techniques to optimize the user experience.

Conclusion

As you can see, styling lists with CSS is both easy and impactful. With just a few lines of code, you can transform your bullet points from bland to beautiful and make your content more engaging and user-friendly.

Whether you choose a classic list-style-type, a custom list-style-image, or advanced ::marker techniques, the key is to prioritize readability and accessibility. Use markers that enhance your content and align with your brand, but always put the user first.

So go forth and style those lists! Experiment with different techniques, get creative with your designs, and don‘t be afraid to sweat the small details. Your users (and your analytics) will thank you.

CSS List Styles Cheat Sheet

Still not sure where to start? Here‘s a handy cheat sheet with some of the most common list style properties and values:

Property	Values
list-style-type	disc, circle, square, decimal, lower-roman, upper-alpha, none
list-style-image	url(‘path/to/image.png‘), none
list-style-position	inside, outside
list-style	type position image (any order)
::marker	color, font-size, content, etc.

Mix and match these properties to create your own unique list styles, and refer back to this guide anytime you need a refresher. Happy styling!

---

Special thanks to CSS expert Sara Soueidan for her insights and recommendations on styling lists with CSS. For more tips and tutorials, check out her blog and courses.

This post was updated on March 1, 2024 to include the latest CSS list styling techniques and browser support information. For the most up-to-date best practices, consult the CSS Lists Level 3 spec.