Can I Color HTML List Bullets Without Using `` or `` Tags?

Colorize HTML List Bullets Without Span

Question:

Can the color of bullets in an HTML list be modified without adding elements like or

within the

tags?

Answer:

Yes, you can achieve this by using the li:before pseudo-element:

li {
  list-style: none;
}

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

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

This technique does not require any additional markup within the

elements. However, it does have certain limitations:

• Supported browsers: IE8 and above, Firefox, Chrome
• Bullet style is limited to unicode characters

The above is the detailed content of Can I Color HTML List Bullets Without Using `` or `` Tags?. For more information, please follow other related articles on the PHP Chinese website!