Change the bullet color of list

Question

I have a list,

    <ul class="listStyle">
        <li>
            <strong>View :</strong> blah blah.
        </li>
        <li>
            <strong>Edit :</strong> blah blah blah.
        </li>
    </ul>

I am using square bullet for list.

    .listStyle{
        list-style-type: square;
    }

Bullets appears in black color. Is it possible change the color of the bullet? If yes, how can i change it?

Please help, Thanks

[How to set the Color of Bullets in UL/LI Lists via CSS, WITHOUT using images or span tags?](http://stackoverflow.com/questions/5306640/how-to-set-the-color-of-bullets-in-ul-li-lists-via-css-without-using-images-or) — Deepak Ingole, Sep 08 '14 at 04:13
You can use pseudo-elements ::before and then apply a content: "• "; and hide list-style. — bep42, Oct 15 '15 at 07:44

Michael Robinson · Accepted Answer · 2014-09-08T04:34:15.623

34

Example JS Fiddle

Bullets take the color property of the list:

.listStyle {
    color: red;
}

Note if you want your list text to be a different colour, you have to wrap it in say, a p, for example:

.listStyle p {
    color: black;
}

Example HTML:

<ul class="listStyle">
    <li>
        <p><strong>View :</strong> blah blah.</p>
    </li>
    <li>
        <p><strong>View :</strong> blah blah.</p>
    </li>
</ul>

edited Sep 08 '14 at 04:34

answered Sep 08 '14 at 04:12

Michael Robinson

29,278
12
104
130

@C-linkNepal you're right, and you were writing that as I was updating my answer :) – Michael Robinson Sep 08 '14 at 04:13
red is working. ".listStyle p" is not working. Since content is not inside p tag – Erma Isabel Sep 08 '14 at 04:32
I disagree, added a JS Fiddle to prove it. – Michael Robinson Sep 08 '14 at 04:34
:-) in my question, there is no p tag inside li. May b i could add a span tag or somthing to make it work. Since adding p tag will add whole lot of styles to li – Erma Isabel Sep 08 '14 at 04:36
I was aware you had no `p` tags. Yes you could use any other tag :) – Michael Robinson Sep 08 '14 at 04:40
Its better write more, smarter css once and use less tags 100 times. – ViliusL Jul 18 '18 at 10:02

score 12 · Answer 2 · answered Sep 08 '14 at 04:15

12

I would recommend you to use background-image instead of default list.

.listStyle {
    list-style: none;
    background: url(image_path.jpg) no-repeat left center;
    padding-left: 30px;
    width: 20px;
    height: 20px;
}

Or, if you don't want to use background-image as bullet, there is an option to do it with pseudo element:

.liststyle{
    list-style: none;
    margin: 0;
    padding: 0;
}
.liststyle:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
    font-size: 20px;/* or whatever the bullet size you prefer */
}

answered Sep 08 '14 at 04:15

Bhojendra Rauniyar

83,432
35
168
231

1

pseudo-elements is a poor choice for verbose bullets. Text will wrap under bullet as opposed to be aligned with the text line above with real bullets – vandre May 31 '17 at 14:58
1

Pseudo-elements are NOT a poor choice: http://jsfiddle.net/leaverou/ytH5P/ – ViliusL Jul 18 '18 at 10:18

score 0 · Answer 3 · edited Sep 08 '14 at 06:32

0

You have to use image

.listStyle {
    list-style: none;
    background: url(bullet.jpg) no-repeat left center;
    padding-left: 40px;
}

edited Sep 08 '14 at 06:32

Substantial

6,684
2
31
40

answered Sep 08 '14 at 04:16

user3074446

124
10

1

Don't use images for circle, it can be generated using css easily. No requests and zoom support. – ViliusL Jul 18 '18 at 09:58

Change the bullet color of list

3 Answers3