list-style-type color

How to set Bullet colors in HTML Lists using only CSS?

Given an unordered lists (UL) of bullets, we need to change the color of the bullets in the list using CSS.

Note: It is not allowed to use any images or span tags.

list-style-type color

First of all, there is not direct way in CSS by which we can change the color of the bullets in an unordered list. However, to change the color of the bullets in an unordered list using CSS, we will have to first discard the default list-style and manually define the content that comes before each list item of the list.

This content is the Unicode of the kind of bullet that you want to use for your list. The Unicode characters for different bullet styles are as follows:



  • Square: "\25AA"
  • Circle: "\2022"
  • Disc: "\2022"

Below is a sample CSS code that removes the default style from an Unordered List in HTML and use unicodes:




ul{
/* Remove default bullets */
list-style: none;
}
ul li::before {
/* Add Unicode of the bullet */
content: ;
/* Color of the content -- bullet here */
color: green;
/* Required to add space between
the bullet and the text */
display: inline-block;
/* Required to add space between
the bullet and the text */
width: 1em;
/* Required to add space between the
bullet and the text */
margin-left: -0.9em;
}

Below programs illustrate the above approach of changing colours of list item bullets:

Example 1:




Changing Bullet Colors

Geek Movies

  • Star Wars
  • Back to the future
  • Ghostbusters
  • The princess bride
  • Shaun of the dead
  • Output:

    list-style-type color

    Example 2:




    Changing Bullet Colors

    Geek Movies

  • Star Wars
  • Back to the future
  • Ghostbusters
  • The princess bride
  • Shaun of the dead
  • Output:

    list-style-type color

    Example 3:




    Changing Bullet Colors

    Geek Movies

  • Star Wars
  • Back to the future
  • Ghostbusters
  • The princess bride
  • Shaun of the dead
  • Output:

    list-style-type color




    Article Tags :
    CSS
    HTML
    Web Technologies
    Practice Tags :
    HTML