1. Home

How To Change Bullet Color of a List

Learn how to change bullet colors for lists with CSS

Change Bullet Color

  • Adele
  • Agnes
  • Billy
  • Bob

    • Try it Yourself »

    Step 1) Add HTML:

    Create a basic list:

    Example

    <ul>
      <li>Adele</li>
      <li>Agnes</li>
      <li>Billy</li>
      <li>Bob</li>
    </ul>

    Step 2) Add CSS:

    By default, it is not possible to change the bullet color of a list item. However, you can do some CSS tricks to make it possible. Note that you might have to tweak it a bit differently if you're using a CSS framework or a special stylesheet:

    Example

    ul {
      list-style: none; /* Remove default bullets */
    }

    ul li::before {
      content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
      color: red; /* Change the color */
      font-weight: bold; /* If you want it to be bold */
      display: inline-block; /* Needed to add space between the bullet and the text */
      width: 1em; /* Also needed for space (tweak if needed) */
      margin-left: -1em; /* Also needed for space (tweak if needed) */
    }
    Try it Yourself »

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US