Color of li bullet only

Question

i'm having problem with bullet in <li> element in Html and twitter bootstrap. I want to change color of li bullet only , not the whole text. I can't make change in html code to put text in span , p or something.

Bootply:http://bootply.com/102688 ( I tried :first-line pseudo class but this is working only for first line so it's not good)

Best Regards And thanks for help.

You could easily achieve this with some `:before` magic, but let's wait if someone has a better idea. — Francisco Presencia, Dec 27 '13 at 18:26
Try here: http://stackoverflow.com/questions/5306640/how-to-define-the-color-of-bullets-in-ul-li-lists-via-css-without-using-any-im — tilda, Dec 27 '13 at 18:26
@tilda, exactly what I was thinking of (I'm not OP), marking as duplicated — Francisco Presencia, Dec 27 '13 at 18:27
@tilda I tried that , the square is very little and i don't know how to do it bigger — woj_jas, Dec 27 '13 at 18:28

score 8 · Accepted Answer · answered Dec 27 '13 at 18:39

8

Another approach that allows to to make LI "dot" via CSS shape - you can customize shape, size etc.

For example the code below will display large red circle:

li:before {
    content: "";
    position:relative;
    left: -10px;
    background-color:red;

    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%
}

Demo: http://jsfiddle.net/LWHYJ/

answered Dec 27 '13 at 18:39

Yuriy Galanter

38,833
15
69
136

I like this but it does rely on modern browsers that have `border-radius`: http://caniuse.com/#feat=border-radius – Jasper Dec 27 '13 at 18:40
1

@Jasper can we call circle displayed as a square in older browsers as "graceful degradation" :) ? – Yuriy Galanter Dec 27 '13 at 18:42
Yeah I think that's a good call. Makes me like this answer more :) – Jasper Dec 27 '13 at 18:43
+1 Cool! @Jasper If a browser doesn't support `border-radius` then the bullet will be a square, I don't think its too troublesome. – Oriol Dec 27 '13 at 18:44
Just don't try to print it. – mghicks Dec 01 '14 at 19:20
2

This is a nice trick. The provided CSS won't work if you have multiple lines of text in some of the li's. To fix that, position the li relatively, and the bullet absolutely. Adjust the positioning accordingly to suit your needs. – sersun Apr 21 '16 at 15:44

score 6 · Answer 2 · edited May 23 '17 at 11:45

6

This can be done in a different manor than the suggested duplicate answer (How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags):

You can wrap the text within the <li /> element in a <span /> tag, then give the <li /> elements a specific color and also give the <span /> elements the correct text color:

CSS:

li {
    color : red;
}

li span {
    color : black;
}

HTML:

<ul>
  <li><span>test</span></li>
</ul>

Here is a demo: http://jsfiddle.net/ytH5P/2754/

edited May 23 '17 at 11:45

Community

1
1

answered Dec 27 '13 at 18:34

Jasper

75,717
14
151
146

1

+1, Excellent. Does not rely on `:before` which _should_ reduce issues with older browsers. – Sparky Dec 27 '13 at 18:35
@Sparky Using a `:before` pseudo-element relies on having common character sets I believe, so the dot symbol may get messed with on different systems. – Jasper Dec 27 '13 at 18:36
Yes, my comment is in agreement with that. Not using `:before` _should_ reduce the issues. – Sparky Dec 27 '13 at 18:40
The OP keeps asking about bigger bullets. Jasper's answer seems easy enough to tweak in this regard: http://jsfiddle.net/ytH5P/2755/ – Sparky Dec 27 '13 at 19:00

Color of li bullet only

2 Answers2