By Sam


2011-03-15 01:50:29 8 Comments

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then everything becomes red!

While I only want to set the color of the square bullets. Is there an elegant way to define the color of the bullets in CSS...

...without using any sprite images nor span tags!

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}

16 comments

@Rahul Desai 2015-08-03 22:36:00

One way to do it is using li:before with content: "" and styling it as inline-block element.

Here is a working code snippet:

ul {
  list-style-type: none; /* no default bullets */
}

ul li { 
  font-family: Arial;
  font-size: 18px;
}

ul li:before { /* the custom styled bullets */
  background-color: #14CCBB;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 2px;
  height: 10px;
  width: 10px;
}
<ul>
  <li>Swollen joints</li>
  <li>Pain in hands and knees</li>
  <li>Redness around joints</li>
  <li>Constant fatigue</li>
  <li>Morning stiffness in joints</li>
  <li>High fevers</li>
  <li>Rheumatoid nodules, which develop around joints</li>
</ul>

@Renan Franca 2015-09-26 02:50:49

THE BEST approach! Thank you

@Jason Bruce 2018-02-07 14:51:05

So much easier than using content ". " or "\2022" as you don't need to worry about positioning of the bullet next to the text

@yeahlad 2019-07-18 04:50:47

Might be better to use ul li:before { ... } so that it doesn't mess with ol lists as well

@Rahul Desai 2019-07-18 17:32:14

@yeahlad good point! I have updated my answer.

@Lea Verou 2011-03-15 07:42:19

The most common way to do this is something along these lines:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}
<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

Will work in all browsers, including IE from version 8 and up.

@Sam 2011-03-15 11:46:04

in contrast to the other impossible cannot be done answers, you have solved this as a very sossible answer! Clever, creative, short... timelessy ELEGANT! thanks

@Sam 2011-03-15 11:50:57

being a nitwit, I would remove the extra space in "• " ==> "•" and add this line below it: padding-right:7px; bit more controll there :) the rest is awesome and works everywhere. PS what does the :before mean/do here?

@Sam 2011-03-15 12:21:54

instead of "• " also possible: content: "4"; font-family:"Webdings"; which will result in a nice > or for a nice ■ content: "■"; font-family:"Arial Black";

@Lea Verou 2011-03-15 15:49:11

@Sam #1: :) @Sam #2: You're right about the space, I'm just lazy :$ Better set the padding in ems though, otherwise it'll break when font-size changes (either because you changed the CSS or because the end user adjusted it) @Sam #3: I wouldn't trust dingbat fonts in web pages, some browsers used to choke in the past (haven't tried it recently). Better just use the unicode character.

@Lea Verou 2011-03-15 15:51:18

Oh, and as for what :before does: It lets you dynamically insert (presentational) content inside an element, before its "real" content. More: w3.org/TR/CSS21/generate.html#before-after-content (I pasted the CSS2 spec to show you it's not even CSS3)

@yitwail 2012-09-05 19:42:17

another alternative to "•" is "\002022"

@Krish 2012-11-16 07:51:08

use content: "● " for the disc as exactly appear in list-style-type:disc

@WhyNotHugo 2013-01-07 05:17:08

@Sam "font-family:"Webdings";" is a terrible idea; you can't assume every user will have that font installed on their system (I don't, and I'm pretty sure it's not that common, especially on mobile devices).

@Michał K 2013-01-25 12:16:55

@LeaVerou This solution negates the effect of list-style-position: outside;, and multiple-line li don't look well . To solve it, simply use margin-left: -15px; /*or whatever value works for you*/

@Mansour 2013-01-26 12:12:01

Hmm, you could set display: inline-block and width: 0.7em for li:before and only have text-indent: -0.7em for li. That way, the left edge of the text will be precisely aligned even in multi-line list items.

@Sc0ttyD 2013-03-28 13:22:32

Also, by adding one of these spaces: en.wikipedia.org/wiki/Space_(punctuation)#Spaces_in_Unicode into the li:before content CSS, such as an Em space, you can get an indent between the list icon and the list body.

@Ilya Streltsyn 2013-07-10 18:24:55

You can also use almost all unicode characters like ★✱✿♥✎✔☞ etc. If the CSS file has the UTF-8 encoding, these characters can be just pasted there, without any escaping.

@Jonathan Tonge 2013-10-16 12:06:03

Recommend adding "font-weight:bold;" or even better "font-weight:900" to li:before to enlarge the disc in Lea's solution. Also, krish answer looks great if I copy straight from here to Chrome's console. However my html editor does not know "content: "● "" and turns it into question mark (?)

@Walter Roman 2014-01-06 18:41:51

I use something similar to the answer to achieve a list-style-position: outside effect. I give the :after selector a value of position: absolute and margin-left: -0.8em (instead of a `padding-right' declaration).

@Madmenyo 2014-01-18 09:46:29

This might have been a good answer in 2011 but nowadays this does not work properly cross browser or not at all.

@Carl Smith 2014-05-24 10:58:46

@MennoGouw It's 2014 here, and this solution works perfectly in Chrome.

@Madmenyo 2014-05-28 19:51:57

@walterroman so it would work perfectly for about 20% of the people. If you are ook with that then use it.

@chrisdillon 2014-07-08 15:06:22

Just nice to read "including IE".

@gsziszi 2014-10-14 13:37:47

original bullet with &nbsp; in css: li:before {content: "\25cf\00a0";} for right aligning: li{padding-left: 1em;text-indent: -1em;} tested with all major browsers

@Alexander Taubenkorb 2014-10-30 17:37:10

To enlarge the circle I added the following to li:before{font-size: 200%;line-height: 50%;vertical-align: sub;}

@aug 2015-03-25 21:48:35

@MennoGuow What exactly do you mean? I just tested on the latest Firefox, Chrome, and Opera and it works fine... Not sure if you were referring to someone's comment.

@Ethan 2015-04-06 21:22:01

It's preferable to provide in unicode, as "\2022". Theoretically, it is "\002022", but you can leave out the leading 0s. Also ref: Placing Unicode character in CSS content value

@basZero 2015-05-12 11:47:09

This solution depends on how the browser renders the dot. If you replace the character by another one, the alignment does not fit anymore: see jsfiddle.net/ytH5P/5024

@Hatoru Hansou 2015-07-25 03:11:17

If you want text-shadow to simulate outlines, like in my case, you have to add the shadow width to the padding. Also I prefer pixels to em for this special case: jsfiddle.net/mj3evc5y/2

@Christine 2017-03-13 21:12:33

Why doesn't this work in IE???

@Arnaldo Capo 2017-10-04 14:01:35

Why isn't this a simple css property? So weird.

@TechNyquist 2018-09-23 10:51:51

What if I want to preserve numeric index? No way. This is a hack to me. The best solution is the one by Benito (stackoverflow.com/a/13590719/214517) , which simply styles li then wraps and styles its content separately.

@Sgnl 2019-06-26 23:42:59

I am unable to apply ANY color when using "\2022", this is in the chrome browser. But when I use is gets colored correctly. Did some spec change?

@user3790264 2014-11-10 15:09:26

This will do it..

li{
  color: #fff;
}

@Davide Perozzi 2016-11-18 15:10:57

This will only affect the text content in the li element. Not the list style.

@Facundo Colombier 2012-10-31 02:46:07

browsing sometime ago, found this site, have you tried this alternative?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}

sounds hard, but you can make your own png image/pattern here, then copy/paste your code and customize your bullets =) stills elegant?

EDIT:

following the idea of @lea-verou on the other answer and applying this philosophy of outside sources enhancement I've come to this other solution:

  1. embed in your head the stylesheet of the Webfont icons Library, in this case Font Awesome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  1. take a code from FontAwesome cheatsheet (or any other webfont icons).
i.e.:
fa-angle-right [&#xf105;]

and use the last part of f... followed by a number like this, with the font-family too:

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;
}

and that's it! now you have custom bullet tips too =)

fiddle

@Facundo Colombier 2012-10-31 02:53:19

I needed a solution for ie7 (of course, does not supports the :before selector).

@Yes Barry 2013-06-16 20:27:24

this works amazingly!

@Diego 2013-09-30 16:17:44

So sorry to say that base64 images don't work in IE7 either... otherwise it would be the best solution...

@Sam 2014-10-11 11:16:35

Upvote for out of the box thinking

@OMA 2015-03-13 13:30:32

Screw IE7. It's a really old browser by now. This solution rocks! Anyway, if you really want to support IE7 you can just copy and paste the Base64 code into a modern browser address bar, then save the image as a PNG file using Ctrl+S (or Cmd+S in Mac) and use the actual PNG file instead of the Base64 encoded string

@Dunc 2015-05-11 12:07:07

Patternify is awesome

@CPrescott 2015-12-04 17:29:40

So much cleaner than accepted answer. I hate having to do negative indents and margins. Makes maintenance a nightmare.

@Henning Fischer 2015-09-11 12:54:05

Lea Verous solution is good but i wanted more control over the position of the bullets so this is my approach:

.entry ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* hide overflow in the case of floating elements around ... */
    overflow: hidden;
}
.entry li { 
    position: relative;
    padding-left: 24px;
}
.entry li:before {
    /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
    position: absolute;
    content: "• ";
    color: #E94E24;
    font-size: 30px;
    left: 0;
    /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ 
    font-family: Arial, sans-serif;
}

@Jose Rui Santos 2013-12-04 07:06:28

Yet, another solution is to use a :before pseudo element with a border-radius: 50%. This will work in all browsers, including IE 8 and up.

Using the em unit allows responsiveness to font size changes. You can test this, by resizing your jsFiddle window.

ul {
    list-style: none;
    line-height: 1em;
    font-size: 3vw;
}

ul li:before {
    content: "";
    line-height: 1em;
    width: .5em;
    height: .5em;
    background-color: red;
    float: left;
    margin: .25em .25em 0;
    border-radius: 50%;
}

jsFiddle

You can even play with the box-shadow to create some nice shadows, something that will not look nice with the content: "• " solution.

@spasticninja 2017-05-08 20:29:21

This worked perfect. I had to adjust the margin to be: margin: 0.5em 0.25em 0 0, but otherwise this was perfect

@Philip Schweiger 2011-03-15 02:05:10

I would recommend giving the LI a background-image and padding-left. The list-style-image attribute is flakey in cross-browser environments, and adding an extra element, such as a span, is unneccessary. So your code would end up looking something like this:

li {
  background:url(../images/bullet.png) 0 0 no-repeat;
  list-style:none;
  padding-left:10px;
}

@mdthh 2013-10-20 13:31:59

I simply solve this problem like this, which should work in all browsers:

HTML:

<ul>
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Bat</span></li>
</ul>

CSS:

ul li{
    color: red
}

ul li span{
    color: blue;
}

@mdthh 2013-10-20 13:41:29

Oops, sorry. Overread that an answer was wanted WITHOUT span :-(

@Alexis Wilke 2016-05-03 04:48:29

Also he wanted the bullet of another color, not the text.

@user2060451 2017-02-11 07:21:34

All good, man. Helped in my first try. This almost never happens, you know how things go. Thanks for the answer. BTW, why not span?

@Даниил Пронин 2018-12-13 09:43:50

the only non-bicycle solution here

@Benito 2012-11-27 18:30:26

I tried this and things got weird for me. (css stopped working after the :after {content: "";} part of this tutorial. I found you can color the bullets by just using color:#ddd; on the li item itself.

Here's an example.

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}

@Leo 2013-06-07 10:55:12

this is the best answer

@oarfish 2013-11-06 08:15:11

It is not. This also colors the text in the li, obviously.

@Sarim 2014-01-14 17:48:52

@oarfish not actually, the text in li are wrapped with another tag, in case i used span.

@aw04 2014-07-22 20:03:14

this is fantastic, much less hackish than most other answers

@Peanuts 2018-05-12 02:10:36

I wrapped the inside li text with a span a this works wonders. Best answer!

@Alex 2011-03-15 01:55:42

The current spec of the CSS 3 Lists module does specify the ::marker pseudo-element which would do exactly what you want; FF has been tested to not support ::marker and I doubt that either Safari or Opera has it. IE, of course, does not support it.

So right now, the only way to do this is to use an image with list-style-image.

I guess you could wrap the contents of an li with a span and then you could set the color of each, but that seems a little hackish to me.

@Kredns 2011-03-15 02:05:48

+1 for this: "IE, of course, does not support it." :)

@thelem 2016-12-15 11:24:12

As of 15th Dec 2016 no major browser supports :marker, see caniuse.com/#feat=css-marker-pseudo

@Conan 2017-05-26 09:02:55

@Kredns - nowadays referred to as an "Edge case".

@Semmerket 2018-03-17 21:57:21

What a shame! Until 2018 none of the major browser support this yet!

@Kovo 2014-02-08 10:58:44

I am adding my solution to this problem.

I don't want to use image and validator will punish you for using negative values in CSS, so I go this way:

ul          { list-style:none; padding:0; margin:0; }

li          { padding-left:0.75em; position:relative; }

li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }

@user2188875 2013-11-13 00:50:50

Taking Lea's demo, here's a different way of making unordered lists, with borders: http://jsfiddle.net/vX4K8/7/

HTML

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <ul>
        <li>Son</li>
        <li>Of</li>
            <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            </ul>
        </ul>
</ul>

CSS

ul {
list-style: none;
margin: 0;
}

ul:first-child {
   padding: 0;
}

li {
    line-height: 180%;
    border-bottom: 1px dashed #CCC;
    margin-left: 14px;
    text-indent: -14px;
}

li:last-child {
    border: none;
}

li:before {
    content: "";
    border-left: 4px solid #CCC;
    padding-left: 10px;
}

@Sam 2016-01-14 23:24:44

@user2188875 Very interesting twist! Thanks for elevating the question and so creatively adding new meaning to the answer. Indeed this way lists could be stylised very maturely! Is this compatible in email html templates too? say one would use this for html mails and send them. Would the receiving party (mac/win7/win10/android/etc) see and read the html properly??

@David 2013-11-25 14:16:53

A variation of Lea Verou solution with perfect indentation in multi-line entries could be something like this:

ul{
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
}

li{
    padding-left: 1.5em; 
}

li:before {
    position: absolute;
    content: "•";
    color: red;
    left: 0;
}

@PoseLab 2014-05-22 08:08:05

This solution is good if your first element in a li has display:block, as a p element

@webster76 2013-07-26 10:00:29

I know it's a bit of a late answer for this post, but for reference...

CSS

ul {
    color: red;
}

li {
    color: black;
}

The bullet colour is defined on the ul tag and then we switch the li colour back.

@Vindberg 2013-08-20 14:32:49

Not working in Chrome. Sadly.

@Johan 2013-10-30 06:19:43

Also not in Firefox 24.

@Izkata 2014-04-29 14:38:22

Works in Firefox 25 and the most recent version of Chrome

@Ferry Boender 2016-11-04 09:17:21

This doesn't work for me, but changing li { to ul li * { does. Tested in Chrome v51 and Firefox v47.0

@robrecord 2017-03-28 14:58:33

This does not work. Ferry, it likely worked for you because your text was wrapped in another element, such as <a> or <span>.

@Veerle Verbert 2011-06-04 13:01:16

I use jQuery for this:

jQuery('li').wrapInner('<span class="li_content" />');

& with some CSS:

li { color: red; }
li span.li_content { color: black; }

maybe overkill, but handy if you're coding for a CMS and you don't want to ask your editors to put an extra span in every list-items.

@Registered User 2012-06-18 22:19:15

This is the best answer.

@Victor Zamanian 2013-05-29 17:41:56

I think "best" needs to be more precisely defined. :P Surely it depends on your needs what is "the best", in almost any given situation. This, for example, didn't suit mine.

@lopsided 2014-02-13 16:37:07

Aside from the jQuery bit this is the most cross-browser and (for me) cross-email-client compatible solution I have found.

@Carl Smith 2014-05-24 11:00:04

Email compatible jQuery??

@yckart 2015-04-25 09:45:00

Keep in mind, that if no javascript is available, the base-color will become your fancy bullets color.

@Eric Goodwin 2016-05-16 19:54:22

I styled the list normally and then if the js ran I updated the styling. That prevents the bullet color from being used for the list if js hasn't executed. Like: jQuery('ol').addClass('ol-wrapper').find('li').wrapInner('<s‌​pan class="li-content" />');

@Adam Bryzak 2011-03-15 01:56:05

The easiest thing you can do is wrap the contents of the <li> in a <span> or equivalent then you can set the color independently.

Alternatively, you could make an image with the bullet color you want and set it with the list-style-image property.

@Richard Herries 2013-08-06 12:54:06

Works also if you would like to make numbers on an OL bold.

@Jammer 2014-07-14 16:03:32

This is a no brainer for compatibility.

@Darren Crabb 2018-03-06 15:04:33

Yeah this is what I use for older IE compatibility. We're still supporting IE7 for legacy reasons of a very large company. The li::before method in the accepted answer above does not work in IE7 as it doesn't support ::before.

Related Questions

Sponsored Content

15 Answered Questions

[SOLVED] Change color of PNG image via CSS?

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1513108 View
  • 2217 Score
  • 28 Answer
  • Tags:   html css opacity

27 Answered Questions

[SOLVED] I need an unordered list without any bullets

  • 2009-06-22 13:57:53
  • praveenjayapal
  • 2012407 View
  • 2413 Score
  • 27 Answer
  • Tags:   html css

34 Answered Questions

[SOLVED] How to set the text color of TextView in code?

26 Answered Questions

[SOLVED] Convert an image to grayscale in HTML/CSS

14 Answered Questions

[SOLVED] Set opacity of background image without affecting child elements

  • 2011-02-14 21:30:38
  • jmohr
  • 516627 View
  • 207 Score
  • 14 Answer
  • Tags:   css css3 opacity

1 Answered Questions

[SOLVED] Using inline styling to color list bullets differently than list items

  • 2016-05-05 14:53:13
  • coder77
  • 1504 View
  • 0 Score
  • 1 Answer
  • Tags:   css html-lists

18 Answered Questions

[SOLVED] Set size on background image with CSS?

  • 2009-08-27 14:08:01
  • Johan
  • 873452 View
  • 382 Score
  • 18 Answer
  • Tags:   css css3

Sponsored Content