0

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.

woj_jas
  • 1,092
  • 7
  • 23
  • 50

2 Answers2

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/

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
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/

Community
  • 1
  • 1
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