For developers: the right way to show bullets and dots on a web page, from a simple HTML entity to fully custom list markers.
Copy
•
HTML entities
| Dot | Named | Decimal | Hex |
|---|---|---|---|
| • | • | • | • |
| · | · | · | · |
| … | … | … | … |
| ⋅ | ⋅ | ⋅ | ⋅ |
| ● | — | ● | ● |
Built-in list bullets
Use a real list (<ul>) for lists. It's better for accessibility and SEO than typing • at the start of lines.
CSS
ul { list-style-type: disc; } /* • */
ul ul { list-style-type: circle; } /* ◦ */
ul ul ul { list-style-type: square; } /* ▪ */Custom bullets with ::marker
CSS
li::marker {
content: "● ";
color: #FF3B2F;
}::marker works in current Chrome, Edge and Firefox. Safari limits which properties it accepts, so for full control across browsers use list-style: none plus a ::before pseudo-element.
Fallback
li { list-style: none; }
li::before {
content: "\2022";
margin-right: .5em;
}Dot separators in navigation
Middle dot between links
nav a + a::before {
content: "\00B7";
margin: 0 .5em;
color: #999;
}Adding separators with CSS keeps them out of the text, so screen readers don't read "middle dot" between every link.
Questions
Should I type • or use <ul>?
Use <ul> for real lists. Type • only for inline separators or where HTML lists aren't available.
How do I change bullet color?
Use li::marker { color: … } or a ::before pseudo-element.
What is the CSS code for a bullet?
content: "\2022"; for •, and "\00B7" for ·.