How to Change List-Style Color in CSS (2 Methods)

Last updated

Written by yasmin

How to Change List-Style Color in CSS (2 Methods)

To change the color of bullet points “list-style” in CSS, note that there’s no direct property like “list-style-color.” However, there are a few methods you can use to adjust the color of your list-style bullets easily.

The first way to change the color of list bullets is by using the CSS ::marker pseudo-element. This property lets you style the bullet or number directly.

Second, if you prefer not to use a pseudo-element, you can use a HTML <span> tag. Wrap the list item text in a <span> and apply a different color to the <li>.

The simplest way to change the color of a <li> is by using the <span> tag. Wrap the content of your <li> inside an empty <span> tag, then target ul li span in your stylesheet to apply the desired color. Here’s an example.

    <style>
      ul li {
        color: red;}
      ul li span {
        color: black; 
      }
    </style>
  <body>
    <ul>
      <li><span>List item 1</span></li>
      <li><span>List item 2</span></li>
    </ul>
  </body>

I have mentiond both the methods in below with simple steps and code examples.

How to Change List-Style Color in CSS (Two Methods)

Method 1: Using Pseudo-Element

With help of pseudo-element we can create a custom bullet point. First we need to remove the default list marker and then will use the ::before pseudo-element to create a custom bullet once everything done after we add styles such as font-size, margin, color, and more.

Let’s break it down simple step by step

Step 1: Remove default bullet list

Select the <ul> in the CSS file and set list-style to none. Here’s an example:

  ul {
        list-style: none; 
      }

After setting list-style: none;, add padding-left: 20px; to create some space on the left. Here’s an example

  ul {
        list-style: none; 
        padding-left: 20px;
      }

Take a look at the code above. First, we removed the default bullet points using list-style: none;. Next, we added padding-left: 20px; to create space for the custom bullet points in the li elements.

Step 2: Add Custom bullet point

Now, select the ul and li elements. Use the ::before pseudo-element to add content and include a bullet (•) inside the content. Here’s an example:

 ul li::before {
        content: "•"; 
 }

Once you add the bullet point value inside the content, it will look like this, even without applying additional CSS.

Step 3: Apply the color of the bullet

Now that we’ve created the bullet points, the next step is to apply a color to them. Here’s an example:

 ul li::before {
        content: "•";
        color: yellowgreen;
      }

Step 4: Other CSS style and preview

You can also adjust the font size and add a small margin-right to create space between the bullet point and the text. Here’s an example:

 ul li::before {
        content: "•";
        color: yellowgreen;
        font-size: 30px;
        margin-right: 10px;
      }

Preview:

This is how you add color using a pseudo-element and a custom bullet point. In the next method, I will explain how to change the color of list bullet points using <span> elements.

Method 2: Using HTML <span> tag

Another method of changing the color of a list style is to use the <span> element. You can wrap each item in a tag, then target the and in your CSS to apply the desired color.

Let’s break it down simple step by step

Step 1: Add <span> inside the <li> tag

Begin by creating an empty <span> inside the <li>. Here’s an example:

 <ul>
      <li><span></span></li>
      <li><span></span></li>
 </ul>

After creating the <span> inside the <li>, add your <li> content within the <span> element.

 <ul>
      <li><span>List item 1</span></li>
      <li><span>List item 2</span></li>
 </ul>

Step 2: Select the <ul> and<li> to style sheet

Next, select the <ul> and <li> in the CSS stylesheet. Here’s an example:

<style>
      ul li {
        color: red; /* Bullet color */
      }
</style>

Step 3: Add color to <ul> and <li>

Now, let’s apply color to the <ul> and <li>. Here’s an example:

  <style>
  * Bullet color */
      ul li {
        color: red; /
      }
  <style>

In the code above, I applied color only to the <ul> and <li>. However, this also affected the <span> inside the <li>, making the text red as well.

Preview:

If you want to change the color of the text inside the <span>, you need to apply a color specifically to the <span> tag as well.

Step 4: Chang color to <ul>, <li> and <span>

To change the color of the text inside the <span>, first select the <ul>, <li>, and <span> in your CSS stylesheet. Here’s an example:

   ul li span {
   /* Text color */
        color: black; 
      }

As you can see in the above CSS code, I applied black color to the <ul>, <li>, and <span>. However, when I saved the files and checked the preview, the color turned black, while the list item style remains red. Here’s the output below:

Now you can see above, the list style is red, and the text color is black. You can also change the colors of both. If you want the complete HTML and CSS code, I have provided it below:

<body>
    <ul>
      <li><span>List item 1</span></li>
      <li><span>List item 2</span></li>
    </ul>
  </body>
 <style>
      /* Bullet color */
      ul li {
        color: red; 
      }
 /* Text color */
      ul li span {
        color: black;
      }
    </style>

These are the two simple to change the list style color using Pseudo-Element and with <span> tag. There are other methods as well, but these two are the easiest and require less code.

I hope this post helps you to Change List-Style Color in CSS.

Related Posts:

Leave a Comment