Change bullets color of an HTML list without using span

Question

I was wondering if there is a way to change the color on the bullets in a list    I have a list like this    lt ul gt      lt li gt House lt  li gt      lt li gt Car lt  li gt      lt li gt Garden lt  li gt   lt  ul gt    It is not possible for me to insert anything in the li s such as a  span  og a  p   So can I change the color of the bullets but not the text in some smart way

User · Answer

I really liked Marc s answer too - I needed a set of different colored ULs and obviously it would be easier just to use a class  Here is what I used for orange  for example   ul orange       list-style  none      padding  0px    ul orange  gt  li before       content    25CF        font-size  15px      color   F00      margin-right  10px      padding  0px      line-height  15px      Plus  I found that the hex code I used for  content   was different than Marc s  that hex circle seemed to sit a bit too high   The one I used seems to sit perfectly in the middle  I also found several other shapes  squares  triangles  circles  etc   right here

User · Answer

For me the best option is to use CSS pseudo elements  so for disc bullet styling it would look like that   x000D   x000D  ul   x000D    list-style-type  none  x000D    x000D   x000D  li   x000D    position  relative  x000D    x000D   x000D  li before   x000D    content      x000D    display  block  x000D    position  absolute  x000D    width  5px     adjust to suit your needs    x000D    height  5px     adjust to suit your needs    x000D    border-radius  50   x000D    left  -15px     adjust to suit your needs    x000D    top  0 5em  x000D    background   f00     adjust to suit your needs    x000D    x000D   lt ul gt  x000D     lt li gt first lt  li gt  x000D     lt li gt second lt  li gt  x000D     lt li gt third lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Notes    width and height should have equal values to keep pointers rounded you may set border-radius to zero if you want to have square list bullets   For more bullets styles you may use other css shapes https   css-tricks com examples ShapesOfCSS   choose this which doesn t require pseudo elements to work  so for example triangles

User · Answer

If you can use an image then you can do this  And without an image you won t be able to change the color of the bullets only and not the text   Using an image  li   list-style-image  url images yourimage jpg       See  list-style-image  Without using an image  Then you have to edit the HTML markup and include a span inside the list and color the li and span with different colors

User · Answer

I managed this without adding markup  but instead using li before  This obviously has all the limitations of  before  no old IE support   but it seems to work with IE8  Firefox and Chrome after some very limited testing  The bullet style is also limited by what s in unicode    x000D   x000D  li   x000D    list-style  none  x000D    x000D  li before   x000D       For a round bullet    x000D    content    2022   x000D       For a square bullet    x000D      content   25A0     x000D    display  block  x000D    position  relative  x000D    max-width  0  x000D    max-height  0  x000D    left  -10px  x000D    top  0  x000D    color  green  x000D    font-size  20px  x000D    x000D   lt ul gt  x000D     lt li gt foo lt  li gt  x000D     lt li gt bar lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

We can combine list-style-image with svgs  which we can inline in css  This method offers incredible control over the  bullets   which can become anything   To get a red circle  just use the following css   ul     list-style-image  url  data image svg xml  lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 10 10  width  10  height  10  gt  lt circle fill  red  cx  5  cy  5  r  2   gt  lt  svg gt         But this is just the beginning  This allows us to do any crazy thing we want with those bullets  circles or rectangles are easy  but anything you can draw with svg you can stick in there  Check out the bullseye example below     x000D   x000D  ul   x000D    list-style-image  url  data image svg xml  lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 10 10  width  10  height  10  gt  lt circle fill  red  cx  5  cy  5  r  5   gt  lt  svg gt     x000D    x000D  ul ul   x000D    list-style-image  url  data image svg xml  lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 10 10  width  10  height  10  gt  lt rect fill  red  x  0  y  0  height  10  width  10   gt  lt  svg gt     x000D    x000D  ul ul ul   x000D    list-style-image  url  data image svg xml  lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 10 10  width  10  height  10  gt  lt circle fill  red  cx  5  cy  5  r  3   gt  lt  svg gt     x000D    x000D  ul ul ul ul   x000D    list-style-image  url  data image svg xml  lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 10 10  width  10  height  10  gt  lt rect fill  red  x  2  y  2  height  4  width  4   gt  lt  svg gt     x000D    x000D  ul bulls-eye   x000D    list-style-image  url  data image svg xml  lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 10 10  width  10  height  10  gt  lt circle fill  red  cx  5  cy  5  r  5   gt  lt circle fill  white  cx  5  cy  5  r  4   gt  lt circle fill  red  cx  5  cy  5  r  2   gt  lt  svg gt     x000D    x000D  ul multi-color   x000D    list-style-image  url  data image svg xml  lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 12 12  width  15  height  15  gt  lt circle fill  blue  cx  6  cy  6  r  6   gt  lt circle fill  pink  cx  6  cy  6  r  4   gt  lt circle fill  green  cx  6  cy  6  r  2   gt  lt  svg gt     x000D    x000D   lt ul gt  x000D     lt li gt  x000D      Big circles  x000D   x000D       lt ul gt  x000D         lt li gt Big rectangles  lt  li gt  x000D         lt li gt b x000D           lt ul gt  x000D             lt li gt Small circles  lt  li gt  x000D             lt li gt c x000D               lt ul gt  x000D                 lt li gt Small rectangles  lt  li gt  x000D                 lt li gt b lt  li gt  x000D               lt  ul gt  x000D             lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D     lt li gt b lt  li gt  x000D   lt  ul gt  x000D   x000D   lt ul class  bulls-eye  gt  x000D     lt li gt Bulls lt  li gt  x000D     lt li gt eyes  lt  li gt  x000D   lt  ul gt  x000D   x000D   lt ul class  multi-color  gt  x000D     lt li gt Multi lt  li gt  x000D     lt li gt color lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Width height attributes  Some browsers require width and height attributes to be set on the  lt svg gt   or they display nothing  At time of writing  recent versions of Firefox exhibit this problem  I ve set both attributes in the examples   Encodings  A recent comment reminded me of encodings for the data-uri  This was a pain-point for me recently  and I can share a bit of information I ve researched   The data-uri spec  which references the URI spec  says that the svg should be encoded according to the URI spec  That means all sorts of characters should be encoded  eg  lt  becomes  3C   Some sources suggest base64 encoding  which should fix encoding issues  however it will unnecessarily increase the size of the SVG  whereas URI encoding will not  I recommend URI encoding   More info   browser-support   ie8  css tricks on svgs  mdn on svgs

User · Answer

I tried this today and typed this  I needed to display color markers in my lists  both bullets and numbers   I came upon this tip and wrote in in my stylesheet whith mutualization of the properties   ul  ol     list-style  none    padding  0    margin  0 0 0 15px    ul    ol     counter-reset  li    li     padding-left  1em     ul li    ul li  before  ol li  before     color   91be3c    display  inline-block    width  1em    ul li  before     content    25CF     margin  0 0 1em 0 -1 1em    ol li     counter-increment  li    ol li  before     content  counter li     margin  0 0 0 -1em      I chose a different character to display a bullet  watching it here  I needed to adjust the margin accoardingly  maybe the values won t apply with the font you chose  the numbers use your webfont

User · Answer

Building off both  Marc and  jessica solutions - This is the solution that I use   li       position relative    li before         content           display  block        position  absolute        width  6px        height 6px        border-radius 6px        left  -20px        top   5em        background-color   000      I use em for font sizes so if you set your top value to be  5em it will always be placed to the mid point of your first line of text  I used left -20px because that is the default position of bullets in browsers  parent  padding 2

User · Answer

Inline version  works for Outlook Desktop    lt ul style  list-style square   gt     lt li style  color red   gt  lt span style  color black   gt Lorem  lt  span gt  lt  li gt     lt li style  color red   gt  lt span style  color black   gt Lorem  lt  span gt  lt  li gt   lt  ul gt    JSFiddle

User · Answer

Try using this instead   ul     color  red

User · Answer

marker  You can use the   marker CSS pseudo-element to select the marker box of a list item  i e  bullets or numbers    ul li  marker     color  red         Note  At the time of posting this answer  this is considered experimental technology and has only been implemented in Firefox and Safari  so far

User · Answer

Building on  ddilsaver s answer  I wanted to be able to use a sprite for the bullet  This appears to work   li     list-style  none    position  relative     li before     content       display  block    position  absolute    width  20px    height  20px    left  -30px    top  5px    background-image  url i20 png      background-position  0px -40px     or whatever offset you want

User · Answer

Building off  Marc s solution -- since the bullet character is rendered differently with different fonts and browsers  I used the following css3 technique with border-radius to make a bullet that I have more control over   li before       content          background-color   898989      display  inline-block      position  relative      height  12px      width  12px      border-radius  6px      -webkit-border-radius  6px      -moz-border-radius  6px      -moz-background-clip  padding      -webkit-background-clip  padding-box      background-clip  padding-box      margin-right  4px      top  2px

User · Answer

I know this is a really  really  old question but i was playing around with this and came up with a way i have not seen posted  Give the list a color and then overwrite the text color using   first-line selector  I m no expert so maybe there is something wrong with this approach that I m missing  but it seems to work    x000D   x000D  li   x000D    color  blue  x000D    x000D   x000D  li  first-line   x000D    color  black  x000D    x000D   lt ul gt  x000D     lt li gt House lt  li gt  x000D     lt li gt Car lt  li gt  x000D     lt li gt Garden lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

[html] Change bullets color of an HTML list without using span

Examples related to html

Examples related to css