CODEWITHSUNDEEP
csslist
Nepo Znat
Nepo Znat

Reputation: 3260

Change color of bullets in a list

Is there a modern CSS solution to change the color of the bullets?

It should work for all types of bullets.

Disc Style

enter image description here


Decimal Style

enter image description here

etc.


My list looks like this:

<ul>
     <li>Lorem ipsum dolor sit amet</li>
     <li>Lorem ipsum dolor sit amet</li>
</ul>

I can't change this markup.


Please don't give solutions like this:

<ul>
     <li><span>Lorem ipsum dolor sit amet</span></li>
     <li><span>Lorem ipsum dolor sit amet</span></li>
</ul>

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}

This requires a markup change

or

li:before {
    content: "• ";
    color: red; 
}

This works only for one list style type

Upvotes: 1

Views: 207

Answers (1)

user1438038
user1438038

Reputation: 6059

The CSS3 specs define a ::marker pseudo-element to do exactly what you want. But, as of today, no browser supports this option.

Firefox has a very similar element, but of course this is browser-specific:

li::-moz-list-bullet {
  color: red;
}

So practically: No, there is no such solution for your problem right now. Usually, you will either use a span or a :before as you suggested yourself, already.

Edit: For numbered lists, you could even do:

<head>
  <style type="text/css">
    li:before {
      content: counter(counter) ". ";
      color: red;
    }
    li {
      list-style-type: none;
      counter-increment: counter;
    }
  </style>
</head>

<body>

  <ul>
    <li>Test</li>
    <li>Test</li>
  </ul>

</body>

Edit 2: Solution with attr(data-bullet):

<head>
  <style type="text/css">
    ul.custom {
      list-style: none;
    }

    ul.custom li:before {
      display: inline-block;
      content: attr(data-bullet);
      color: red;
      width: 30px;
    }
  </style>
</head>

<body>

<ul class="custom">
  <li data-bullet="a">Item 1</li>
  <li data-bullet="b">Item 2</li>
  <li data-bullet="ba">Item 3.1<br/>
</ul>

</body>

Upvotes: 4

Related Questions