Summarize this article with:
Default browser bullets look terrible. You know it, I know it, your users definitely know it.
CSS lists examples show you how to transform basic ul and ol elements into polished components that actually match your design.
The list-style property alone won’t cut it for modern layouts. You need custom markers, horizontal arrangements, nested structures, and accessible markup that works across Chrome, Firefox, Safari, and Edge.
This guide covers everything from basic bullet customization to advanced CSS counters and the ::marker pseudo-element.
Working code included for each technique. Copy, paste, adapt.
What is CSS List Styling
CSS list styling controls how ordered and unordered lists appear on web pages.
The list-style property and its sub-properties let you change bullet points, numbering formats, marker positions, and custom icons.
Default browser styles rarely match your design needs. That’s where CSS steps in.
You can transform basic HTML ul and ol elements into polished navigation menus, feature lists, pricing tables, and content indexes.
List styling works across Chrome, Firefox, Safari, and Edge without compatibility issues.
CSS Lists Examples To Check Out
Task List
See the Pen
Task list by Blaz Kemperle (@blazicke)
on CodePen.
Hover Effect on CSS List Items
See the Pen
CSS List Items Hover Effects by ankit (@celebstori)
on CodePen.
List Rocks the Venetian Blind Animation
See the Pen
Rolldown List by Peter Hrynkow (@peterhry)
on CodePen.
100dayscss
See the Pen
100dayscss #27 by Daiane Assen (@INapta)
on CodePen.
Checklist Magic – Pure CSS Love
See the Pen
Checklist animation – Only CSS by Milan Raring (@milanraring)
on CodePen.
Let’s Get Interactive: The Loose-Leaf Todo
See the Pen
Interactive Loose-Leaf Todo List by Ian (@IanWoodard)
on CodePen.
Color Pop & Dimension by Erin E. Sullivan
See the Pen
Gradient Ordered List by Erin E. Sullivan (@erinesullivan)
on CodePen.
It’s All in the Details: Todo List
See the Pen
Todo list with Little Details (cpc) by Amit Sheen (@amit_sheen)
on CodePen.
Bouncy Add & Delete List Dance
See the Pen
Animated List by Che (@code_dependant)
on CodePen.
Hover & Transition: List Style by Mirza
See the Pen
CSS List Item Hover Effect by Mirza (@Aricati)
on CodePen.
Morphing Moonrocks
See the Pen
Morphing Moonrocks by Chris Coyier (@chriscoyier)
on CodePen.
CSS Gradient Counter Wonder
See the Pen
CSS Gradient Counter List by Mattia Astorino (@equinusocio)
on CodePen.
Forbes Leaderboard Glam
See the Pen
Forbes Leaderboard by Mark Eriksson (@Markshall)
on CodePen.
List Elegance by Armando
See the Pen
CSS list by Armando (@agtzsl27)
on CodePen.
Sticky Note Todo Lists
See the Pen
Todo List with Sticky Notes(CPC) by wheatup (@wheatup)
on CodePen.
Keeping It Simple, But Not Basic
See the Pen
custom ordered list bullets by Dimitri Denis (@dimilo)
on CodePen.
Everyday Reminders: To-do List
See the Pen
To-do list by Sabine Robart (@_Sabine)
on CodePen.
When Things Get A Little Sticky
See the Pen
Pretty Sticky by Burmese Potato (@BurmesePotato)
on CodePen.
Planning That Getaway: Vacation Todo List
See the Pen
Vacation Todo List by Taranjot Gill (@tjgill)
on CodePen.
Everything in Order: The Order of Operations
See the Pen
The Order of Operations Challenge #cpc-counters #codepenchallenge by Gražvydas Žilius (@deracans-the-styleful)
on CodePen.
Drop It Like It’s Hot: Numbered Lists
See the Pen
CSS-only numbered lists with “drop” shapes by Ines Montani (@ines)
on CodePen.
Got Them Cards: ListView
See the Pen
Cards – ListView by Sowmya Seshadri (@sowmyaseshadri)
on CodePen.
Animate My Life: CSS-only Todo List Checkbox
See the Pen
☑️ CSS-only Todo List Checkbox Animation by Shaw (@shshaw)
on CodePen.
A Little Extra: Ordered List with that Zero
See the Pen
CSS ordered list with leading zero by Sven Wolfermann (@maddesigns)
on CodePen.
Flipping The Script: Reversed and Split
See the Pen
Reversed and split list by Michelle Barker (@michellebarker)
on CodePen.
Keep It Classy: Todo List UI with VueJs
See the Pen
Todo List UI with VueJs by Sawsan (@saawsan)
on CodePen.
Bang! Those Custom Bullet Points
See the Pen
Custom Bullet Points by PSR (@psr031)
on CodePen.
Living On The Grid: The Goodness by Raúl R. Pearson
See the Pen
Ridiculously responsive lists with CSS Grid by Raúl R Pearson (@raulrpearson)
on CodePen.
Take A Spin: Scroll List Animation
See the Pen
Scroll List Animation by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.
Codepen Squad Roster: Even/Odd Vibes
See the Pen
Codepen Team Member List – Even/Odd Styles by Josetxu (@josetxu)
on CodePen.
Dress Up Those Numbers: Decked Out Lists
See the Pen
Decorated Numbered Lists by Dudley Storey (@dudleystorey)
on CodePen.
Spotlight on the List: Pure HTML and CSS Magic
See the Pen
Featured List pure html css by BdThemes (@bdthemes)
on CodePen.
Levels on Levels: Nested Counting by Mark
See the Pen
Resetting list counters by Mark (@xmark)
on CodePen.
Let’s Get Sideways: Horizontal List Fun
See the Pen
Horizontal Ordered List by Morten Brunbjerg Bech (@bechster)
on CodePen.
Step-by-Step with Style: Custom Progress Signs
See the Pen
Custom properties step progress indicator by Michelle Barker (@michellebarker)
on CodePen.
Shape Shift and Drop: Morphing Menu Action
See the Pen
Morphing tab button with list by Colin Horn (@colinhorn)
on CodePen.
Turn the Fancy Up: The Aesthetically-Pleasing List
See the Pen
Template – Fancy List by Fred (@fcarlin)
on CodePen.
Grow As You Go: Terrarium To-Do
See the Pen
To-Do Terrarium by Olivia Ng (@oliviale)
on CodePen.
For the Bookworms: Compact Quotes
See the Pen
Compact book quotes by lalacode (@lalacode)
on CodePen.
Flip the Script: 3D List Extravaganza by Andrew Canham
See the Pen
3D List expansion by Andrew Canham (@candroo)
on CodePen.
Sleek and Simple: That UI Flow
See the Pen
List UI by Collin Smith (@collincodes)
on CodePen.
Up on the Board: DailyUI’s Leader Rankings
See the Pen
DailyUI #019 – Leaderboard by Fabio Ottaviani (@supah)
on CodePen.
Pen Down Your Needs: Handwritten Shopping Fun
See the Pen
Handwritten shopping list with custom markers by Michelle Barker (@michellebarker)
on CodePen.
How Does the list-style Property Work
The list-style shorthand property combines three values: type, position, and image.
Write them in any order. The browser figures out which is which.
The list-style-type Property
This property sets the marker format for list items.
Unordered lists use disc, circle, or square. Ordered lists accept decimal, lower-alpha, upper-roman, and dozens more.
“ ul { list-style-type: square; }
ol { list-style-type: lower-roman; } `
The list-style-position Property
Controls whether markers sit inside or outside the content box.
Outside is the default. Inside wraps text under the marker, which works well for tight layouts.
` ul { list-style-position: inside; } `
The list-style-image Property
Replace default bullets with custom icons using a URL value.
Works with PNG, SVG, and other image formats. SVG scales better for responsive design.
` ul { list-style-image: url('checkmark.svg'); } `
What Are the Types of CSS Lists
HTML provides three list types, each styled differently with CSS.
Unordered Lists (ul)
Bullet point lists for items without sequence importance.
Default marker is a filled disc. Change it with list-style-type or remove it entirely with list-style: none.
` <ul> <li>Feature one</li> <li>Feature two</li> <li>Feature three</li> </ul> `
` ul { list-style-type: circle; padding-inline-start: 20px; } `
Ordered Lists (ol)
Numbered lists for sequential steps, rankings, or prioritized content.
Use the start attribute to begin from any number. The reversed attribute counts backward.
` <ol start="5" reversed> <li>Fifth item</li> <li>Fourth item</li> <li>Third item</li> </ol> `
` ol { list-style-type: upper-roman; } `
Definition Lists (dl)
Term and description pairs. Perfect for glossaries, FAQs, and metadata displays.
Uses dt for terms and dd for descriptions. No default markers.
` <dl> <dt>CSS</dt> <dd>Cascading Style Sheets for web styling</dd> <dt>HTML</dt> <dd>HyperText Markup Language for structure</dd> </dl> `
` dt { font-weight: bold; }
dd { margin-inline-start: 40px; } `
How to Style List Markers with CSS
Modern CSS gives you precise control over marker appearance through the ::marker pseudo-element and custom content.
How to Change Marker Colors
The ::marker pseudo-element targets bullet points and numbers directly.
Works in all modern browsers. Limited properties available: color, font-size, font-family, and content.
` li::marker { color: #e74c3c; font-size: 1.2em; } `
How to Use Custom Bullet Icons
Two methods work well. The list-style-image property or background images on li elements.
Background method offers more positioning control.
` ul { list-style: none; padding-left: 0; }
ul li { padding-left: 25px; background: url(‘icon.svg’) no-repeat left center; background-size: 16px 16px; } `
How to Create Custom Counters
CSS counters let you build complex numbering systems beyond default options.
Use counter-reset on the parent and counter-increment on items.
` ol { counter-reset: section; list-style: none; }
ol li::before { counter-increment: section; content: counters(section, “.”) ” “; font-weight: bold; } `
What is the Difference Between list-style-position Inside and Outside
| Property | Inside | Outside | | — | — | — | | Marker location | Within content box | Left of content box | | Text wrap | Wraps under marker | Aligns with first line | | Spacing control | Less predictable | More consistent | | Use case | Tight layouts, cards | Standard content lists |
Outside positioning (default) keeps markers in the margin. Text lines up cleanly.
Inside positioning tucks markers into the content flow. Works better for CSS cards and constrained containers.
` / Outside - default behavior / .standard-list { list-style-position: outside; padding-left: 20px; }
/ Inside – compact layout / .compact-list { list-style-position: inside; padding-left: 0; } `
Choose based on your layout constraints. Outside for readability, inside for space efficiency.
Which List Style Works Best for Specific Use Cases
Different layouts demand different approaches. Here’s what actually works.
For Navigation Menus
Strip all default styling with list-style: none and build from scratch.
Horizontal menus use display: flex or display: inline-block on li elements. Add CSS hover effects for micro-interactions.
` .nav-menu { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0; }
.nav-menu li a { text-decoration: none; padding: 10px 15px; } `
For Feature Lists
Custom checkmarks or icons communicate value better than plain bullets.
Use Bootstrap icons or inline SVG for scalable markers that match your brand.
` .feature-list { list-style: none; padding-left: 0; }
.feature-list li::before { content: “✓”; color: #27ae60; font-weight: bold; margin-right: 10px; } `
For Pricing Tables
Clean, scannable lists with consistent spacing. Remove bullets entirely.
Alternating background colors on list items improve readability in dense feature comparisons.
` .pricing-features { list-style: none; padding: 0; }
.pricing-features li { padding: 12px 0; border-bottom: 1px solid #eee; }
.pricing-features li:nth-child(even) { background: #f9f9f9; } `
For Table of Contents
Nested ordered lists with CSS counters create hierarchical section numbering (1.1, 1.2, 2.1).
` .toc { counter-reset: section; }
.toc > li { counter-increment: section; counter-reset: subsection; }
.toc > li::before { content: counter(section) “. “; }
.toc li li::before { counter-increment: subsection; content: counter(section) “.” counter(subsection) ” “; } `
Common Problems with CSS Lists
Why Does Extra Spacing Appear Around Lists
Browsers add default margin and padding to ul and ol elements. Reset both.
` ul, ol { margin: 0; padding: 0; padding-inline-start: 20px; / keeps indent without excess space / } `
How to Fix Bullets Not Showing
Check for inherited list-style: none from CSS frameworks or resets.
Verify the li elements have display: list-item. Flexbox and grid children lose markers by default.
` / Restore markers on flex children / .flex-list { display: flex; flex-direction: column; }
.flex-list li { display: list-item; list-style: disc inside; } `
Why Does list-style-image Look Blurry
PNG icons blur on high-DPI screens. Switch to SVG for crisp rendering at any size.
Control dimensions with background-size when using the background-image method.
How to Align Markers with Multi-line Text
Use vertical-align on ::marker or switch to flexbox with a pseudo-element.
` .aligned-list { list-style: none; }
.aligned-list li { display: flex; align-items: flex-start; gap: 10px; }
.aligned-list li::before { content: “•”; flex-shrink: 0; } `
How to Create Horizontal Lists
Inline list display transforms vertical lists into horizontal layouts for menus, tags, and breadcrumb trails.
Using Flexbox
Most reliable method. Full control over spacing, alignment, and wrapping.
` .horizontal-list { display: flex; flex-wrap: wrap; gap: 15px; list-style: none; padding: 0; } `
Using Inline-block
Older approach, still works. Watch for whitespace gaps between items in your HTML.
` .inline-list { list-style: none; padding: 0; }
.inline-list li { display: inline-block; margin-right: 15px; } `
How to Style Nested Lists
Nested list indentation creates visual hierarchy for sub-items. Control depth with descendant selectors.
` / First level / ul { list-style-type: disc; }
/ Second level / ul ul { list-style-type: circle; margin-left: 20px; }
/ Third level / ul ul ul { list-style-type: square; } `
Ordered nested lists work the same way. Mix roman numerals, letters, and decimals for clear hierarchy.
` ol { list-style-type: decimal; } ol ol { list-style-type: lower-alpha; } ol ol ol { list-style-type: lower-roman; } `
How to Remove Default List Styling
Start fresh by stripping browser defaults. Essential for custom CSS menu designs.
` .reset-list { list-style: none; margin: 0; padding: 0; }
.reset-list li { margin: 0; padding: 0; } `
Normalize.css and Reset CSS (Meyer) handle this globally. Pick one for consistent cross-browser compatibility.
How to Make Lists Accessible
Screen readers announce list structure automatically. Don’t break this with improper markup.
Keep Semantic Structure
Use ul, ol, and li elements. Divs with bullets aren’t lists to assistive technology.
The list role attribute restores semantics if list-style: none removes them in Safari/VoiceOver.
` <ul role="list" class="styled-list"> <li>Item one</li> <li>Item two</li> </ul> `
Add ARIA When Needed
Navigation lists benefit from role=”navigation” or the nav element wrapper.
ARIA labels clarify purpose when multiple lists exist on one page, improving web accessibility.
` <nav aria-label="Main navigation"> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> `
Browser Support for CSS List Properties
| Property | Chrome | Firefox | Safari | Edge | | — | — | — | — | — | | list-style | Yes (1+) | Yes (1+) | Yes (1+) | Yes (12+) | | list-style-type | Yes (1+) | Yes (1+) | Yes (1+) | Yes (12+) | | list-style-image | Yes (1+) | Yes (1+) | Yes (1+) | Yes (12+) | | ::marker | Yes (86+) | Yes (68+) | Yes (11.1+) | Yes (86+) | | @counter-style | Yes (91+) | Yes (33+) | Yes (17+) | Yes (91+) |
Core list properties work everywhere. The ::marker pseudo-element needs modern browsers.
Check Can I Use for edge cases with @counter-style and advanced counter features.
FAQ on CSS Lists Examples
How do I remove bullets from an unordered list?
Set list-style: none on the ul element. Also reset padding and margin to zero for complete control. This strips all default browser styling, giving you a blank canvas for custom designs.
What is the difference between list-style-type and list-style-image?
list-style-type uses predefined markers like disc, circle, square, or decimal. list-style-image lets you specify a custom graphic URL. SVG images scale better than PNG for responsive typography needs.
How do I create a horizontal list with CSS?
Apply display: flex to the ul element and add gap for spacing. Remove default list-style. This method works reliably for CSS hamburger menus and inline navigation patterns.
Can I change the color of list bullets?
Yes. Use the ::marker pseudo-element to target bullets directly. Set color, font-size, or content properties. Works in Chrome 86+, Firefox 68+, Safari 11.1+, and Edge 86+.
How do I style nested lists differently?
Use descendant selectors like ul ul for second-level and ul ul ul for third-level lists. Apply different list-style-type values to each depth. Control nested list indentation with margin-left.
What is the ::marker pseudo-element?
The ::marker pseudo-element targets list item markers directly. You can style color, font-size, font-family, and content. Limited properties compared to regular elements, but handles most bullet customization needs.
How do I use custom images as list bullets?
Two options work well. Use list-style-image: url(‘icon.svg’) for simple cases. For more control, set list-style to none and apply background-image on li elements with proper padding.
Why are my list markers not showing?
Check for inherited list-style: none from CSS resets or frameworks. Verify li elements have display: list-item. Flexbox and grid system children lose markers by default.
How do CSS counters work with lists?
Use counter-reset on the parent and counter-increment on list items. Display values with the content property and counter() function. Creates custom numbering like “Section 1.1” for table of contents.
Are CSS list styles accessible for screen readers?
Yes, when using proper ul, ol, and li elements. Safari/VoiceOver may ignore lists with list-style: none. Add role=”list” to restore semantics. Follow W3C WCAG guidelines for proper markup.
Conclusion
These CSS lists examples give you the foundation to style any list scenario you’ll encounter.
From basic list-style-type changes to advanced counter-increment patterns, you now have working code for real projects.
The ::marker pseudo-element handles most bullet customization. Custom background images solve edge cases where markers fall short.
Horizontal layouts with flexbox, multi-column arrangements, and nested structures all follow predictable patterns once you understand the underlying properties.
Don’t forget accessibility. Proper ul, ol, and li markup keeps screen readers happy. Add role=”list”` when stripping default styles in Safari.
Test across browsers. Core properties work everywhere, but newer features like @counter-style need verification on usability testing platforms.
Bookmark this guide. You’ll reference it more than you expect.
