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

Setting Bullet Colors in HTML Lists without Images or Inline Elements

When styling unordered lists, one may want to change the color of the bullets without affecting the list item text. While simply setting the color of the

element works, it also changes the text color.

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!