CSS Lists

CSS Lists: Customizing Bullets, Numbers, and ::marker

CSS list properties control how markers appear on ul and ol elements—and how to strip default bullets and indentation cleanly when turning a list into a horizontal navigation bar.

List Style Properties and ::marker

• list-style-type: Selects bullet shapes (disc, circle, square, none) or numbering schemes (decimal, lower-alpha, upper-roman).
• list-style-position: outside (default) aligns wrapped lines neatly under the first letter of text, whereas inside pulls the bullet into the text block.
• ::marker: Modern CSS pseudo-element that styles bullet or number color and font weight directly without replacing the list with fake spans.

.feature-list {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 20px;
}

.feature-list li {
    margin-bottom: 8px;
}

.feature-list li::marker {
    color: #2563eb;
    font-weight: 700;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
}

Resetting Lists for Navigation Menus

When removing bullets with list-style: none; for a navigation menu, also zero out default browser margin: 0; padding: 0; on the ul. Note that Safari VoiceOver can stop announcing a ul as a list when list-style: none; is set unless role="list" is added if list announcement matters.

Common Mistakes to Avoid

• Using list-style-position: inside on multi-line bullets: Wrapped lines collide under the bullet instead of aligning smoothly; keep outside for readable articles.
• Putting list-style on li when targeting the whole list: Set list-style: none; on the parent ul or ol unless overriding one specific item.
• Forgetting spacing between li items: Adding margin-bottom: 8px or gap makes long checklists far easier to scan.

Frequently Asked Questions

How do I color list bullets without coloring the text?

Target the li::marker pseudo-element directly (li::marker { color: #2563eb; })—supported cleanly across all modern browsers.

How can I use custom emoji or symbols as list bullets?

Set list-style-type: "✓ "; or style li::marker { content: "→ "; } directly in modern CSS.