Can You Customize List Bullet Colors Without Using a `` Element?

How to Customize List Bullets Without Span

In HTML, a bullet list provides a concise and ordered way to present items. However, by default, the bullet style is limited and cannot be altered without adding extra elements like a span.

Can You Change List Bullet Colors Without Using Span?

Yes, it's possible to modify bullet colors using CSS and the :before pseudo-element, without the need for additional markup inside the list items.

Implementation

1. Remove the default bullet style:

   li {
     list-style: none;
   }

2. Insert a :before pseudo-element to display a custom bullet:

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

• content: Specifies the Unicode character for the desired bullet shape.
• color: Sets the bullet's color.
• font-size: Adjusts the bullet's size.

Note: This method works well in modern browsers but may not be compatible with older IE versions.

Example HTML

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

The above is the detailed content of Can You Customize List Bullet Colors Without Using a `` Element?. For more information, please follow other related articles on the PHP Chinese website!