How Can I Customize Bullet Colors in HTML Lists Using CSS?

Customizing Bullet Colors in HTML Lists with CSS

In HTML lists, customizing the bullets' appearance can enhance the visual appeal of the content. However, setting the color of the list items using CSS affects both the text and the bullets. For a more elegant solution, consider the following approach:

Create a new CSS style for the unordered list (

). Disable the default bullets by setting list-style: none;.

For each list item (

• ), add padding to the left and a negative text-indent to offset the content from the bullet.

  Finally, use the ::before pseudo-element to create a custom bullet before each list item. You can set the content (such as a dot or a square) and the color independently.

  Example:

  HTML

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

  Copy after login

  CSS

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  li {
    padding-left: 1em;
    text-indent: -0.7em;
  }
  
  li::before {
    content: "• ";
    color: red; 
  }

  Copy after login

  The above is the detailed content of How Can I Customize Bullet Colors in HTML Lists Using CSS?. For more information, please follow other related articles on the PHP Chinese website!