How Can I Change List Bullet Color in HTML Without Using Spans?

Changing List Bullets Color Without Span

In HTML, customizing the color of list bullets can be a challenge. While it's possible to enclose list items in spans, this may not be an option in certain scenarios. This question seeks a solution that modifies bullet color without adding additional markup.

To achieve this, the answer leverages CSS's li:before pseudo-element. By setting list-style: none for the li element, the default bullet is removed. The li:before element is then used to display a custom bullet using the content property to specify a unicode character. The color property sets the desired bullet color.

Here's the CSS code:

li {
  list-style: none;
}

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

To use this solution, simply apply the CSS style to your list as follows:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

This technique allows you to change the color of bullets without modifying the list item content or adding additional markup, providing a flexible way to customize your HTML lists.

The above is the detailed content of How Can I Change List Bullet Color in HTML Without Using Spans?. For more information, please follow other related articles on the PHP Chinese website!