Set color of a specific bullet in a list

Related searches

I have this CSS:

 .list-mark-3 li:before {
   font-family: 'Font Awesome 5 Free';
    content: '\f101';
    font-weight: 900;
    font-size: 12px;
    color: white !important;
}

and this HTML:

<div class="col-sm-5">
    <ul class="list list-mark-3">
        <li>ABC</li>
        <li class="makeitwhite">DEF</li>
        <li>GHI</li>
    </ul>
</div>

which produces something like this:

However, I would like to make the bullet, and the text for that matter, for DEF white. Just that one bullet. I have tried setting the color to white in the "makeitwhite" class, inline style, etc. Nothing!

Any suggestions?

Maybe something like this:

.list-mark-3 li.makeitwhite
    {
        color:white;
    }

How To Change Bullet Color of a List, 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� By default, it is not possible to change the bullet color of a list item. However, you can do some CSS tricks to make it possible. Note that you might have to tweak it a bit differently if you're using a CSS framework or a special stylesheet:

You'll want to use nth-child() for that:

.list-mark-3 li:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f101';
    font-weight: 900;
    font-size: 12px;
    color: white !important;
}

.list-mark-3 li:nth-child(2) {
    color: white;
}

JS Fiddle

To make it white on hover, add this: li:nth-child(2):hover

Finally, it Will Be Easy to Change the Color of List Bullets, Ever wanted to make a list with the bullets a different color than the text, like in this We will also assume that you don't want to, or cannot, change the HTML markup. So we'd rather use text that we can style, in particular a bullet such as • or� However, to change the color of the bullets in an unordered list using CSS, we will have to first discard the default list-style and manually define the content that comes before each list item of the list. This content is the Unicode of the kind of bullet that you want to use for your list. The Unicode characters for different bullet styles

Try the in-line css

<div class="col-sm-5">
    <ul class="list list-mark-3">
        <li>ABC</li>
        <li style="color: white;">DEF</li>
        <li>GHI</li>
    </ul>
</div>

CSS: colored bullets and list numbers, Change bullet color of list item by replacing it with CSS */ ul li { color: #3c3c3c; /* set color of list item text */ display: inline-block; list-style: none;� 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.

Change the Bullet Color of a List Item with CSS, Given an unordered lists (UL) of bullets, we need to change the color of the bullets in the list using CSS. Note: It is not allowed to use any� In web design, sometimes it is useful to change the bullet color of a list item to some other color besides the text color. We can do this using CSS. For example, perhaps you have a bulleted list, and you want to keep the text black, but make the bullets green. There is no CSS rule for declaring the color of li or ul bullets directly. Though it would be cool if there were an easy way to do

How to set Bullet colors in HTML Lists using only CSS , All I want is to be able to change the color of a bullet in a list to a light gray. It defaults to black, and I can't figure out how to change it. I know I could just use an image; I'd rather not do

The list-style-position property specifies the position of the list-item markers (bullet points). "list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default: Coffee - A brewed drink prepared from roasted coffee beans Tea; Coca-cola

Comments
  • Do you want DEF to be white on hover or always white?
  • @Bodrov Always white.
  • Close enough to give me the idea for: .list-mark-3 li.whitebullet:before { color: white !important; content: '\f101'; } So mark as answer. Welcome to Stackoverflow.
  • I don't know the position of the item since the list is filled from a database. So I can't use position based style. Need to be able to add a class, or inline style, to <li> directly.
  • This makes the TEXT white, but not the bullet itself.