How to Change Bullet Colors in HTML Lists Without Using Span Elements?

How to Modify Bullet Colors in HTML Lists Without Span Elements

In certain scenarios, you may want to change the color of bullets in an HTML list without adding elements within

tags. Here's an ingenious solution that avoids the use of spans.

To achieve this, harness the :before pseudo-element:

li {
  list-style: none;
}

li:before {
  /* For a round bullet */
  content: '22';
  /* For a square bullet */
  /* content: 'A0'; */
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

This method removes the default bullet style and creates a new bullet via :before. It provides flexibility in terms of shape and color, with support in major browsers including IE8, Firefox, and Chrome.

The above is the detailed content of How to Change Bullet Colors in HTML Lists Without Using Span Elements?. For more information, please follow other related articles on the PHP Chinese website!