Skip to Main Content


Minneapolis 2470 University Ave W
St Paul, MN 55114
(651) 646-0696

New York City 1216 Broadway, 2nd Floor
New York, NY 10001
(929) 322-4971

Taking a Shot at Better Bulleted Lists

Frankly, HTML unordered lists aren’t perfect. You have a few options for the types of bullets you can produce, and they often don’t align with what is designed. Here’s a relatively simple solution to custom styling those pesky bulleted lists.

The bullet in bulleted lists get their color from the LI and can't normally be styled separately, but what if you want the bullet a different color that the text?

Use New Markup

You could wrap the li content in another tag and target that tag with css, but obviously, this is not ideal since it is not maintainable.

li { color: red; } li > div { color: black; }

Use CSS and “No New Markup”

For an "Outside Disc" you can use the code below.

ul { padding-left: 1em; } ul > li { /* needed to contain the new bullet */ position: relative; /* turns off default styling */ list-style: none; padding-left: .75em; } ul > li:before { /* unicode bullet */ content: '\2022'; position: absolute; left: 0; /* beware of werewolves */ color: silver; }

For an "Inside Disc" use this code.

ul { padding-left: 1em; } ul > li { list-style: none; } ul > li:before { content: '\2022'; display: inline-block; /* adjust as needed */ margin-right: .125em; color: silver; }

See the examples.

Making it more “bullet proof”

Should you use progressive enhancement or graceful degradation? It’s really up to you to decide which route you want to take. Your decision could be based on timeline, budget, supported browsers, or any number of reasons.

Sign Up For Our Newsletter

Join to receive updates, inspiration, and news in your inbox from time to time.