CSS Lists Tutorial: list-style-type, list-style-position & Custom Markers (2026-27 Guide)

✅ What Are CSS Lists?

A CSS list refers to styling applied to HTML's two native list elements: <ul> (unordered list, normally bulleted) and <ol> (ordered list, normally numbered), each containing one or more <li> (list item) children. Without any CSS, browsers apply default markers -round bullets for <ul> and sequential numbers for <ol> -plus a left indent. CSS lets you fully override the marker style, its position, its image, and even the entire layout direction of the list.

<!-- Unordered list -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Plan the layout</li>
  <li>Write the HTML</li>
  <li>Style with CSS</li>
</ol>

✅ list-style-type

list-style-type sets the marker shown before each list item. Unordered lists typically use shape-based markers, while ordered lists use numbering systems:

/* Unordered list markers */
ul.disc   { list-style-type: disc;   }  /* ● default */
ul.circle { list-style-type: circle; }  /* ○ hollow circle */
ul.square { list-style-type: square; }  /* ■ filled square */
ul.none   { list-style-type: none;   }  /* no marker */

/* Ordered list markers */
ol.decimal     { list-style-type: decimal;     }  /* 1. 2. 3. */
ol.lower-roman { list-style-type: lower-roman;  }  /* i. ii. iii. */
ol.upper-roman { list-style-type: upper-roman;  }  /* I. II. III. */
ol.lower-alpha { list-style-type: lower-alpha;  }  /* a. b. c. */
ol.upper-alpha { list-style-type: upper-alpha;  }  /* A. B. C. */

✅ list-style-position

list-style-position controls whether the marker sits outside the content box (the default) or inside it. This becomes visible the moment a list item's text wraps onto a second line.

✅ list-style-image

list-style-image replaces the default bullet with a small custom image:

ul.custom-icon {
  list-style-image: url('checkmark.png');
}

/* Modern alternative with more control: */
ul.custom-icon-modern {
  list-style: none;
  padding-left: 0;
}
ul.custom-icon-modern li {
  padding-left: 28px;
  background: url('checkmark.png') no-repeat left center;
  background-size: 18px 18px;
}

✅ The list-style Shorthand

The list-style shorthand combines list-style-type, list-style-position, and list-style-image into a single declaration, in any order:

✅ Removing Bullets & Indentation

The most common real-world use of CSS lists is removing the default bullet and indentation -the first step in turning a semantic list into a navigation bar, card grid, or custom layout.

✅ Styling Markers with ::marker

The modern ::marker pseudo-element lets you style the bullet or number itself -independently from the list item's text -without removing it and rebuilding it manually.

✅ Horizontal Lists & Navigation Menus

Almost every horizontal navigation bar on the web is a <ul> with bullets removed and its items laid out in a row using display: flex or inline-block.

✅ Nested Lists

Lists can be nested inside one another -a common pattern for multi-level navigation menus, table-of-contents widgets, and outlines. Each nested level gets its own list-style-type automatically in many browsers, but it's best to set it explicitly:

✅ CSS Counters for Custom Numbering

For full control over numbering style -beyond what list-style-type offers -CSS counters let you generate fully custom numbering, including multi-level "1.1, 1.2, 2.1" style outlines.

✅ List Properties – Reference Table

✅ Best Practices

✔️ 1) Always Reset Both Marker AND Spacing Together
When removing bullets for a nav menu, set list-style: none; margin: 0; padding: 0; together -not just one of them.

✔️ 2) Keep Using Semantic List Markup for Navigation
Even when a list is visually styled to look nothing like a "list" (a horizontal nav bar, a card grid), keep it as a real <ul>/<li> structure for accessibility and SEO benefits.

✔️ 3) Use ::marker Instead of Removing and Rebuilding Markers
Before reaching for list-style: none plus a manual ::before bullet, check whether ::marker alone (for simple color/size changes) solves the need with less code.

✔️ 4) Prefer Flexbox/Grid Over Floats for Horizontal Lists
Modern horizontal nav lists should use display: flex with gap, not the older float-based techniques, for simpler and more reliable spacing and wrapping.

✔️ 5) Use list-style-position: inside Carefully
It changes text alignment on wrapped lines -test it specifically with realistic, longer list item text before shipping, not just short single-line items.

✅ Common Mistakes to Avoid

✅ Complete Live Example

A real-world pricing-feature checklist combining several list techniques together:

✅ Try It Yourself – Interactive Editor

Edit the HTML and CSS below to experiment with list styling. Try changing marker types, building a horizontal nav, or removing bullets entirely. The preview updates automatically.

✅ 🎨 Interactive List-Style Playground

Pick a list type, marker style, position, and color to instantly preview how your list will look. Copy the generated CSS with one click.

✅ Practice – Yes / No Quiz

✅ Frequently Asked Questions (FAQ)