How to Change Bullet Colors in HTML Lists Without Images or Extra Tags?

How to Customize Bullet Colors in HTML Lists without Using Images or Span Tags

The Challenge

When customizing an unsorted HTML list with square bullets using list-style: square;, one may encounter the issue of the entire list items becoming the specified color instead of just the bullets. This begs the question: how do we modify the bullets' color without resorting to sprite images or additional tags?

The Solution

A simple and effective solution exists:

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

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

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

li::before {
  content: "• ";
  color: red; /* or any desired color */
}

In this approach:

• list-style: none; removes the default bullets.
• padding-left and text-indent adjust the content positioning.
• li::before inserts the bullet using the content property. The color property then specifies the desired color.

This technique allows for elegant customization of bullet colors in HTML lists without the need for additional elements or images.

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