To customize the bullets of unordered list items, I am utilizing a pseudo-class to display 4 boxes and a white right pointing arrow (▢▢▢▢▷) by default:
li:before {
content: "\25A2\25A2\25A2\25A2\25B7";
padding-right: 0;
}
In addition, I want to introduce another pseudo-class that will alter specific list items to show 4 boxes with a black right pointing arrow (▢▢▢▢▶):
.known li:before {
content: "\25A2\25A2\25A2\25A2\25B6";
padding-right: 0;
}
<li>general data</li> <-the default for most items
<li class="known">marked data</li> <-a few select cases
Unfortunately, it seems that using a class selector along with pseudo-classes is not effective in achieving this objective.
My knowledge of pseudo-classes is still limited as I have recently discovered how to change all bullet points but struggle with applying them conditionally based on classes.
At the moment, I would be required to manually modify each li element to include the desired box and arrow styles since the current method does not support conditional application using classes.