Change bullets color of an HTML list without using span

Custom bullet colors using pseudo-elements

Now, let's sail further. If you require more control over bullet appearance, there is another robust method involving ::before pseudo-element:

ul {
  list-style: none; /* Make the bullets go poof! */
}

li::before {
  content: '•';    /* Any Unicode character would do, but I prefer the good old dot! */
  color: blue;     /* As calming as the seaside */
  font-size: 20px; /* The bigger, The better */
  margin-right: 8px; /* Because everybody values personal space */
  font-family: 'Arial'; /* The font of the bullet, keeping things simple */
  line-height: 1; /* The alignment must be perfect */
}


The list-style set to none will remove the default bullets while the ::before pseudo-element creates the new, manipulative bullets.

Keeping compatibility in check

It's cool to use ::marker for clarity but do remember the browser support limitations. Targeting older browsers like IE? Then the ::before pseudo-element is your trusty sidekick:

li::before {
  content: url('bullet.svg'); /* Bullets can be trendy with SVGs! */
}


Using an SVG provides a raft of options but do remember to URI encode it and avoid any misrendering kerfuffles.

Visuals make it fun

Visualizing concepts makes learning enjoyable. Let us learn how to color list bullets, without the help of span:

Original List:         Colored Bullet List:
- 🎈                    - 🔵🎈 Item 1
- 🎈                    - 🔴🎈 Item 2
- 🎈                    - 🟢🎈 Item 3

The way to color these bullets without touching the balloons is:

li::marker {
    color: red; /* Paint the bullets red while the balloons are having the time of their lives! */
}


And voilà! Our list bullets have changed color meanwhile the text color remains unaffected. Quite mesmerizing, right? 🎨🖌️

Crafting fancy custom bullets with CSS3

Why settle for ordinary? Create custom-styled bullets to make your lists distinctive. CSS3 and its features like border-radius might help your cause along with -moz-background-clip for cross-browser compatibility:

li::first-line {
  color: #555; /* Make the first line-blushing, while the bullets remain nonchalant. */
}


Maintain an immaculate balance between the creations and item text for a perfect readability and layout.