Demo How To Make Colored List Bullets And Numbers With HTML/CSS

Home » Color List Li Css » Demo How To Make Colored List Bullets And Numbers With HTML/CSS

Maybe your like

Demo how to make colored list bullets and numbers with HTML/CSS

Here's the easy way to make colored list bullets, or colored list numbers:

  • This bullet is red
  • This bullet is green
  • This bullet is blue
  • This bullet is white
  • This bullet is hidden
  1. This number is red
  2. This number is green
  3. This number is blue

Source:

<ul style="background-color:#ff0;max-width:20em"> <li style="color:red"><span style="color:black">This bullet is red</span></li> <li style="color:green"><span style="color:black">This bullet is green</span></li> <li style="color:blue"><span style="color:black">This bullet is blue</span></li> <li style="color:white"><span style="color:black">This bullet is white</span></li> <li style="visibility:hidden"><span style="visibility:visible">This bullet is hidden</span></li> </ul> <ol> <li style="color:red"><span style="color:black">This number is red</span></li> <li style="color:green"><span style="color:black">This number is green</span></li> <li style="color:blue"><span style="color:black">This number is blue</span></li> </ol>

Note: maddeningly, you cannot do the same trick with the opacity attribute. Nested opacity settings multiply, and you cannot set a value greater than 1, so there's no way to "undue" an outer opacity setting:

  • This bullet has opacity 0.5
  • This bullet has opacity 0.5
  • The bullet has opacity 0.5, and the text has opacity 0.5×0.5 = 0.25
  • This text has opacity 0.5

Source:

<ul> <li style="opacity:0.5"><span style="opacity:2">This bullet has opacity 0.5</span></li> <li style="opacity:0.5"><span style="opacity:1">This bullet has opacity 0.5</span></li> <li style="opacity:0.5"><span style="opacity:0.5">The bullet has opacity 0.5, and the text has opacity 0.5×0.5 = 0.25</span></li> <li><span style="opacity:0.5">This text has opacity 0.5</span></li> </ul>

Dave Burton, 5/25/2019

Tag » Color List Li Css