Finally, it Will Be Easy to Change the Color of List Bullets

In my germinating years, the general advice was this:

• List item

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

Not terrible, but not great. You’re “resetting” everything at the span level, so it gets more complicated the more you do.

Things are getting much easier. Let’s take a walk through this world getting more modern as we go.

An alternative was to rip off the default list styling and replace it with a pseudo-element.

ul {
  list-style: none;
}

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

If we need to count, we could do that with CSS counters.

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}

ol li {
  counter-increment: my-awesome-counter;
}

ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
}

Quick aside here: this doesn’t help with the color, but you can specify what character to use for the bullet by setting a string, like:

ul {
  list-style-type: '✽ ';
}

This is as of Firefox 39 (2015) and Chrome 79 (which comes out Dec 9, 2019).

For ordered lists, there is a ton of language-specific options. And those language styles work for CSS counters as well, which you can learn more about in Hui Jing’s deep dive.

But all the while, we only wanted to select the stupid bullet (or whatever it is) and style it. Now we are starting to be able to do just that.

As of Firefox 68 (July 2019), you can do like:

li::marker {
  color: red;
  content: "►";
}

…which, as you can see, changes the color and the bullet thing That is definitely the cleanest and easiest way to go, so it’s nice to see progress.

Tejas demonstrates:

Manuel Matuzović notes that if you set an element to a list-item display type, you can use markers on them as well.

h2 {
  display: list-item;
}

h2::marker {
  color: orange;
  content: "☞";
}

Even Safari has support at the time of this writing, so we should lean on Chrome here.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

The above is the detailed content of Finally, it Will Be Easy to Change the Color of List Bullets. For more information, please follow other related articles on the PHP Chinese website!