In my germinating years, the general advice was this:<\/p>\n
<ul>\r\n <li><span>List item<\/span><\/li>\r\n <!-- ... -->\r\n<\/ul><\/code><\/pre>\nli { color: red; } \/* bullet *\/\r\nli span { color: black; } \/* text *\/<\/code><\/pre>\nNot terrible, but not great. You’re “resetting” everything at the span level, so it gets more complicated the more you do. <\/p>\n
Things are getting much easier. Let’s take a walk through this world getting more modern as we go.<\/p>\n
<\/p>\n
\nAn alternative was to rip off the default list styling and replace it with a pseudo-element.<\/p>\n
ul {\r\n list-style: none;\r\n}\r\n\r\nli::before {\r\n content: \"\u2022 \";\r\n color: red;\r\n}<\/code><\/pre>\nIf we need to count, we could do that with CSS counters<\/a>. <\/p>\nol {\r\n list-style: none;\r\n counter-reset: my-awesome-counter;\r\n}\r\n\r\nol li {\r\n counter-increment: my-awesome-counter;\r\n}\r\n\r\nol li::before {\r\n content: counter(my-awesome-counter) \". \";\r\n color: red;\r\n}<\/code><\/pre>\n
\nQuick 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:<\/p>\n
ul {\r\n list-style-type: '\u273d ';\r\n}<\/code><\/pre>\nThis is as of Firefox 39 (2015) and Chrome 79 (which comes out Dec 9, 2019<\/a>). <\/p>\nFor ordered lists, there is a ton of language-specific options<\/a>. And those language styles work for CSS counters as well, which you can learn more about in Hui Jing’s deep dive<\/a>. <\/p>\n\n See the Pen
\n Random CSS counters playground<\/a> by Chen Hui Jing (@huijing<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n
\nBut 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.<\/p>\n
As of Firefox 68 (July 2019), you can do like:<\/p>\n
li::marker {\r\n color: red;\r\n content: \"\u25ba\";\r\n}<\/code><\/pre>\n…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.<\/p>\n
Tejas demonstrates:<\/p>\n
\n See the Pen
\n ::marker example<\/a> by Tejas (@tejask<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nManuel Matuzovi\u0107 notes<\/a> that if you set an element to a list-item<\/code> display type, you can use markers on them as well.<\/p>\nh2 {\r\n display: list-item;\r\n}\r\n\r\nh2::marker {\r\n color: orange;\r\n content: \"\u261e\";\r\n}<\/code><\/pre>\nEven Safari has support at the time of this writing, so we should lean on Chrome<\/a> here.<\/p>\n