CSS - How To Change Bullet Color Of Unordered List? - Dirask

Home » Color List Li Css » CSS - How To Change Bullet Color Of Unordered List? - Dirask

Maybe your like

In this article, we would like to show you how to change bullet color of unordered list using CSS.

By default, it is not possible to change the bullet color of an unordered list item.

However, you can achieve this effect in the following way:

  1. Remove the existing bullet ul { list-style-type: none; }
  2.  Add new bullet using content: "\2022"; ( \2022 is bullet character unicode),
  3. Change the content (new bullet) color,
  4. Specify the space between the new bullet and list item text,
  5. Move list item with a new bullet to the left (margin-left: -1em;) to the old bullet place.

Note:

You can also customize the bullet with various CSS styles such as font-weight: bold; and so on.

 

Practical example

In this example, we use the five steps mentioned above to create an unordered list with red bullets.

// ONLINE-RUNNER:browser; <!doctype html> <html> <head> <style> ul { list-style-type: none; /* remove existing bullet */ } ul li::before { content: "\2022"; /* adds new bullet, \2022 is the CSS code/unicode for a bullet */ color: red; /* change the content (bullet) color */ font-weight: bold; /* if you want it to be bold */ font-size: 1em; /* specifies font size in em or %*/ display: inline-block; /* adds space between the bullet and the text */ width: 2em; /* space between the bullet and the text */ margin-left: -1em; /* move bullet to the left (to the old bullet place) */ } </style> </head> <body> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </body> </html>

Alternative solution

In this example, we remove the existing bullet, create a new one from SVG and set its color using SVG element atribute - fill='silver' (you can use color names and hex colors).

// ONLINE-RUNNER:browser; <!doctype html> <html> <body> <style> ul { padding: 0 0 0 15px; position: relative; list-style-type: none; /* remove existing bullet */ } ul li::before { position: absolute; left: 0; width: 7px; height: 7px; line-height: 0.9rem; display: inline-block; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='silver' viewBox='0 0 2 2'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E"); } </style> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </body> </html>

Note:

 Change fill='silver' in the code above to set your own bullet color.

You can use both color names and hex codes.

Tag » Color List Li Css