How to change the color of bullets using CSS ?
To present a list of data in HTML which have no order/sequence but are related to each other unordered list is used. Unordered lists are created using <ul> tag and each list item is written using <li> tag. List items are pointed out using plain bullets.
Note: We cannot change the color of the bullet of the unordered list by default but we can take the help of some other tags and selectors.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
There are two ways to change the color of the bullet:
- Using an extra markup tag.
- Using Css style ::before selector
Default style: Let us create a list of data using an unordered list.
CSS can be used to change these bullets to make them more attractive and attention-seeking to the readers. Let us see how we can change the color of bullets to make more visual sense to the readers.
Adding an extra markup: You can have separate colors for the list text and bullet after adding an extra markup. In the example below, we will enclose the list text in a span, then define the style to display the results. You can enclose with any HTML tags like <strong>,<p>, etc. as per your need.
Using CSS ::before Selector: The first step is to remove the default styling through CSS styles. Then add the style accordingly for the bullet content that you want. You can edit the styles according to the design and spacing that you need. Create your own custom bullet with your own indentation and color styles. There is no need to add an extra markup as compared to the previous step. Old browsers will not support “:before” and may hamper your website’s look in that case.