Styling Lists
Change list markers, position, and spacing.
Syntax
list-style-type: square;List properties control bullet and number styling:
list-style-type— disc, circle, square, decimal, none.list-style-position— inside or outside.list-style-image— a custom marker image.
Setting list-style: none and removing padding is common when building navigation menus.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer removes the default bullet style from a navigation ul with list-style: none to style it as a horizontal menu.
- A designer uses list-style-type: decimal-leading-zero on an ordered list in a step-by-step guide to display steps as 01, 02, 03.
- A developer uses a custom SVG icon as a list-style-image to replace default bullets with branded check marks.
More examples
Remove bullets for nav menu
Strips default list bullets and padding then makes the list horizontal with flexbox — a common nav pattern.
.nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 16px;
}Custom bullet style and position
Uses list-style-position: inside to keep bullets within the element's box, and decimal numbering for ordered steps.
ul.features {
list-style-type: disc;
list-style-position: inside;
padding-left: 0;
}
ol.steps {
list-style-type: decimal;
padding-left: 1.5rem;
}Custom image as list marker
Replaces bullets with a custom SVG check icon using a background image positioned on the left of each list item.
ul.checklist {
list-style: none;
padding: 0;
}
ul.checklist li {
padding-left: 28px;
background: url('check-icon.svg') no-repeat left center / 18px 18px;
margin-bottom: 8px;
}
Discussion