The bullet character (U+2022) is the primary symbol used as a list marker -- the solid round dot that introduces each item in an unordered list. Unicode contains a family of bullet-like and list-marker characters across several code blocks, each with slightly different visual weight, shape, or semantic intent.
The Standard Bullet and Variants
U+2022 BULLET -- the standard solid circle bullet
U+2023 TRIANGULAR BULLET -- right-pointing triangle
U+2043 HYPHEN BULLET -- horizontal dash form
U+204C BLACK LEFTWARDS BULLET
U+204D BLACK RIGHTWARDS BULLET
U+2219 BULLET OPERATOR (mathematics, smaller)
U+25E6 WHITE BULLET -- open circle
U+2024 ONE DOT LEADER (smaller, for footnotes)
HTML Lists vs Bullet Character
For web content, <ul> and <li> semantic HTML is strongly preferred over manually inserting bullet characters:
<!-- Semantic: accessible, stylable, correct -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<!-- Non-semantic: avoid for actual lists -->
<p>• First item</p>
<p>• Second item</p>
The semantic approach is screen-reader accessible, stylable via CSS, and correct for SEO. The bullet character is appropriate only in contexts where HTML structure is unavailable (plain text, certain chat interfaces) or for inline decorative use.
CSS List Style Customization
/* Built-in list style types */
ul { list-style-type: disc; } /* filled circle (default) */
ul { list-style-type: circle; } /* open circle */
ul { list-style-type: square; } /* filled square */
ol { list-style-type: decimal; } /* 1, 2, 3 */
ol { list-style-type: lower-roman; } /* i, ii, iii */
/* Custom bullet using content property */
ul.custom li::before {
content: '\2023'; /* triangular bullet */
margin-right: 0.5em;
color: var(--accent-color);
}
/* Remove default bullet for custom styling */
ul.custom {
list-style: none;
padding-left: 0;
}
/* Custom bullet image */
ul.fancy {
list-style-image: url('bullet.svg');
}
/* Using @counter-style for full control */
@counter-style stars {
system: cyclic;
symbols: '\2605'; /* filled star */
suffix: ' ';
}
ul.stars {
list-style: stars;
}
Nested List Bullets
Browsers apply different default list markers at each nesting level:
ul { list-style-type: disc; } /* Level 1: filled circle */
ul ul { list-style-type: circle; } /* Level 2: open circle */
ul ul ul { list-style-type: square; } /* Level 3: filled square */
Bullet in Plain Text and Markdown
<!-- Markdown uses - or * as list markers, rendered as bullets in HTML -->
- Item one
- Item two
- Nested item
HTML Entity
• <!-- U+2022 -->
• <!-- hex -->
• <!-- decimal -->
Bullet as Separator
Outside of lists, the bullet character is frequently used as an inline separator in metadata lines, breadcrumbs, or tag lists:
<!-- Common pattern: metadata separated by bullets -->
<p class="meta">Author • January 2025 • 5 min read</p>
<!-- Better for accessibility: use aria-hidden on the bullet -->
<p class="meta">
<span>Author</span>
<span aria-hidden="true"> • </span>
<span>January 2025</span>
</p>
The bullet separator pattern should be implemented carefully for screen readers -- using aria-hidden on the bullet itself prevents it from being read as "bullet" between items.