Default list bullets work, but they rarely match a brand, a theme, or a design system. In this walkthrough you will build five creative <ul> bullet styles using pure CSS. No images, no SVGs, just careful use of pseudo-elements, gradients, and a few transforms. By the end, you will have reusable classes for triangles, circles, squares, diamonds, and stars that you can theme with a couple of CSS variables.
Why Styling <ul> List Bullets Matters
Lists carry key content: feature checklists, onboarding steps, and navigation details. The default disc often looks out of place once you set a custom color palette or a distinctive visual language. Custom bullets solve that gap without shipping font libraries or extra assets. CSS-only bullets are easy to theme, easy to animate, and render crisply on any DPI at any size. With pseudo-elements you gain full control over alignment, spacing, and state changes on hover and focus. That flexibility makes custom bullets a smart upgrade for any UI that leans on lists.
Prerequisites
You only need a few core CSS features to get value from this guide. If you have styled a component with pseudo-elements before, you are ready.
- Basic HTML
- CSS custom properties
- CSS pseudo-elements (::before / ::after)
Step 1: The HTML Structure
The markup groups five lists under a single container. Each list uses a shared class for base spacing and a modifier class for the bullet style. You can drop any of these lists into your project independently; they do not rely on each other.
<!-- HTML -->
<section class="demo">
<h3>Triangle Bullets</h3>
<ul class="bullets bullets--triangle">
<li>Research user needs</li>
<li>Define success metrics</li>
<li>Plan the first release</li>
</ul>
<h3>Circle Bullets (Duotone)</h3>
<ul class="bullets bullets--circle">
<li>Design tokens in place</li>
<li>Color contrast checked</li>
<li>Typography scale settled</li>
</ul>
<h3>Square Bullets</h3>
<ul class="bullets bullets--square">
<li>Set up CI</li>
<li>Run lint and tests</li>
<li>Deploy to staging</li>
</ul>
<h3>Diamond Bullets</h3>
<ul class="bullets bullets--diamond">
<li>Capture feedback</li>
<li>Prioritize issues</li>
<li>Ship improvements</li>
</ul>
<h3>Star Bullets</h3>
<ul class="bullets bullets--star">
<li>Delight with details</li>
<li>Celebrate wins</li>
<li>Share insights</li>
</ul>
</section>
Step 2: The Basic CSS & Styling
Start with a small set of custom properties to control bullet size and color. The shared .bullets rules remove the native marker and set up space for a custom bullet using ::before. Each list item gets left padding for the bullet and uses relative positioning to anchor the pseudo-element.
/* CSS */
:root {
--bullet-size: 0.8rem;
--gap: 0.6rem;
--text: #1f2937;
--muted: #6b7280;
--accent: #2563eb;
--accent-2: #22d3ee;
--bg: #ffffff;
}
body {
margin: 0;
padding: 2rem;
font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background: #f8fafc;
}
.demo {
max-width: 700px;
margin: 0 auto;
background: var(--bg);
padding: 1.25rem 1.5rem 1.5rem;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.demo h3 {
margin: 1.5rem 0 0.5rem;
font-size: 1.05rem;
color: #0f172a;
}
.bullets {
list-style: none;
margin: 0 0 1rem;
padding: 0;
}
.bullets li {
position: relative;
padding-left: calc(var(--bullet-size) + 0.75rem);
margin: var(--gap) 0;
color: var(--text);
}
.bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em; /* vertical alignment seed, tweaked per style */
width: var(--bullet-size);
height: var(--bullet-size);
}
Advanced Tip: Centralize color and sizing in custom properties so you can theme any bullet class per component. You can override
--accentor--bullet-sizeon a parent container to scale and recolor every bullet consistently.
Step 3: Building Bullet Styles 1 and 2 (Triangles and Circles)
The first two bullets cover a directional triangle and a duotone circle. The triangle uses the classic CSS border trick. The circle uses a subtle highlight plus a gradient fill to feel tactile on light backgrounds.
/* CSS */
/* 1) Triangle bullets: point right */
.bullets--triangle li::before {
/* Zero-sized box with borders forming a triangle */
width: 0;
height: 0;
top: 0.8em; /* half the border height helps centering */
border-left: var(--bullet-size) solid var(--accent);
border-top: calc(var(--bullet-size) * 0.5) solid transparent;
border-bottom: calc(var(--bullet-size) * 0.5) solid transparent;
}
/* 2) Circle bullets: duotone with a soft specular highlight */
.bullets--circle li::before {
top: 0.5em;
border-radius: 50%;
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8) 0 35%, transparent 36%) ,
linear-gradient(135deg, var(--accent), var(--accent-2));
box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
}
How This Works (Code Breakdown)
The triangle relies on a box with zero width and height. Borders paint outside that box. When you set a solid left border and make the top and bottom borders transparent, the result is a crisp right-facing triangle. This is the same pattern you use when you construct a triangle with CSS, just scaled down for bullet duty. The top offset nudges the triangle to align with the text baseline.
The circle uses a real box, rounded to 50 percent. The layered backgrounds create depth. A small radial gradient placed at 35 percent adds a soft glint, which makes the circle feel more polished than a flat fill. The linear gradient blends two accent colors to produce a duotone look. If you want a flat dot, you can reduce the background to a single solid color. For more ideas on circular geometry and precise sizing, the guide on building a circle with CSS pairs well with this pattern.
Step 4: Building Bullet Styles 3-5 (Squares, Diamonds, Stars)
The next three styles share the same base spacing, but each uses a distinct technique: a minimal square, a rotated diamond, and a five-point star cut with clip-path.
/* CSS */
/* 3) Square bullets: clean and compact */
.bullets--square li::before {
top: 0.55em;
background: var(--accent);
border-radius: 2px;
}
/* 4) Diamond bullets: rotated square for a sharper look */
.bullets--diamond li::before {
top: 0.6em;
transform: translateY(-10%) rotate(45deg);
transform-origin: center;
background: var(--accent);
border-radius: 2px;
}
/* 5) Star bullets: five-point star via clip-path */
.bullets--star li::before {
/* Slightly larger visual footprint for clarity */
width: calc(var(--bullet-size) * 1.15);
height: calc(var(--bullet-size) * 1.15);
top: 0.45em;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
-webkit-clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
}
How This Works (Code Breakdown)
The square uses the default pseudo-element box and gives it a small corner radius to soften the edges. You keep alignment by pinning to the left edge and nudging the top value until the square sits midway on the x-height of your text. For clarity at smaller sizes, avoid heavy box-shadows on tiny shapes.
The diamond is a square rotated by 45 degrees, which increases perceived sharpness without increasing the size. The transform origin remains at the center, and a small translateY keeps the vertical centering intact. If you prefer a non-rotated variant, stick with the square above. To refresh the basics of CSS squares and why side length equals height for perfect geometry, see this primer on making a square with CSS.
The star uses a polygon clip-path with ten points. The polygon cuts the pseudo-element into a five-point star. A gradient fill adds a subtle bevel effect. Clip-path works well for small decorative shapes and is widely supported in modern browsers. If you want a border around the star, wrap the gradient in a background and add a second layered conic or inset shadow to simulate a stroke.
Advanced Techniques: Animations and Interactive States
You can add motion and interaction to bullets without noise. Keep the scale minimal, rely on transform for smooth rendering, and respect user motion preferences. The snippet below adds hover and focus styles to highlight items and introduces a gentle shimmer for stars.
/* CSS */
/* Shared interactive affordances */
.bullets li {
transition: color 120ms ease;
}
.bullets li:hover,
.bullets li:focus-within {
color: #0f172a;
}
.bullets li:hover::before,
.bullets li:focus-within::before {
filter: brightness(1.05);
}
/* Triangle nudge: a small slide on hover */
.bullets--triangle li::before {
transition: transform 150ms ease;
}
.bullets--triangle li:hover::before,
.bullets--triangle li:focus-within::before {
transform: translateX(1px);
}
/* Circle pulse: gentle scale */
.bullets--circle li::before {
transition: transform 150ms ease;
}
.bullets--circle li:hover::before,
.bullets--circle li:focus-within::before {
transform: scale(1.08);
}
/* Star shimmer: subtle gradient sweep */
@keyframes shimmer {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
.bullets--star li::before {
background-size: 200% 100%;
}
.bullets--star li:hover::before,
.bullets--star li:focus-within::before {
animation: shimmer 700ms linear both;
}
/* Motion safety */
@media (prefers-reduced-motion: reduce) {
.bullets li,
.bullets li::before {
transition: none !important;
animation: none !important;
}
}
Advanced Tip: Keep state changes on the bullet, not the text, when the intent is to guide the eye along the list. If the content itself changes color or weight, users can read it as a change of meaning. A gentle transform on the bullet communicates focus without competing with the words.
Accessibility & Performance
Bullet styling should never change the semantics of your list. The items are still list items, and screen readers still announce them as a group. The pseudo-elements you add are decorative, so they require no extra labels. If your bullets must convey meaning beyond decoration, place real inline elements with text labels or use an accessible icon component instead of a purely visual bullet.
Accessibility
Keep the <ul> and <li> elements intact. The bullets in this guide use ::before, which are invisible to assistive tech by default. That is good for decoration. If you switch to ::marker, test your styling because ::marker has a narrower set of properties it accepts. Support keyboard focus with :focus-within on list items if they contain links or inputs, and consider matching your hover affordance with this focus state. For motion, the media query in the code above already respects user preferences via prefers-reduced-motion.
Performance
These bullets are small and render on the compositor. Transforms and opacity changes are cheap, so the hover effects remain responsive. The triangle border trick is especially light. Clip-path on tiny stars performs well, but avoid animating complex clip-paths. If you scale bullets for headings or hero sections, keep the number of layers small and avoid heavy box-shadow blurs. Theme changes are instant because they flow from custom properties on the root or a container.
The last closing paragraph
You now have five reusable CSS bullet styles that you can drop into any project and theme with a couple of variables. These patterns cover directional, geometric, and ornamental shapes, and you can extend them with your own palette and motion rules. Keep exploring shapes such as a right-facing triangle with CSS, a perfect circle with CSS, or a crisp square with CSS to grow your custom bullet library even further.