How Can I Change Bullet Colors in HTML Lists Using Only CSS?

An Elegant CSS-Only Solution

The answer lies in the ::before pseudo-element:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em;
  text-indent: -0.7em;
}

li::before {
  content: "•";
  color: #F00;
}

This code achieves the desired effect without resorting to images or inline elements. Here's how it works:

• list-style: none; removes the default bullets.
• ::before creates a pseudo-element positioned before each
• item.
• content: "•" specifies the desired bullet as a disc or square.
• color: #F00; sets the color of the bullet.
• Indenting the list item text with padding-left and text-indent ensures alignment with the bullet.

The above is the detailed content of How Can I Change Bullet Colors in HTML Lists Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!