How to set Bullet colors in HTML Lists using only CSS?
Last Updated :
30 Sep, 2024
In HTML, unordered lists (<ul>) typically use default bullet styles, which inherit the text color of the list items. Sometimes, you may want to change the color of the bullets themselves. Although CSS does not provide a direct way to style the default bullets, there is a workaround. By removing the default list-style and using Unicode characters, you can manually define custom bullet styles with specific colors.
Note: It is not allowed to use any images or span tags for this task.
Approach:
To change the bullet color in an unordered list using CSS:
- Remove the default bullets by setting list-style: none;.
- Use the ::before pseudo-element to insert a Unicode bullet before each list item (<li>).
- Style the bullet using CSS properties like color, font-size, and margin-left.
Unicode Characters for Common Bullet Styles:
- Square: \25AA
- Circle: \25E6
- Disc: \2022
Below is a sample CSS code that removes the default style from an Unordered List in HTML and uses Unicode:
CSS
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;
}
Example 1: Disc Bullets
In this example, we use the Unicode character \2022 for a disc-style bullet and set the bullet color to green.
HTML
<html>
<head>
<title>Changing Bullet Colors</title>
<style>
h3 {
color: green;
}
ul {
list-style: none;
}
ul li::before {
/* \2022 is the CSS Code/unicode for a disc */
content: "\2022";
color: green;
display: inline-block;
width: 1em;
margin-left: -0.9em;
font-weight: bold;
font-size: 1.1rem;
}
</style>
</head>
<body>
<h3>Geek Movies</h3>
<!-- Create an Unordered List -->
<ul>
<li>Star Wars</li>
<li>Back to the future</li>
<li>Ghostbusters</li>
<li>The princess bride</li>
<li>Shaun of the dead</li>
</ul>
</body>
</html>
Output:
Example 2: Circle Bullets
In this example, we use the Unicode character \25E6 for a circle-style bullet and set the bullet color to green.
HTML
<html>
<head>
<title>Changing Bullet Colors</title>
<style>
h3 {
color: green;
}
ul {
list-style: none;
}
ul li::before {
/*\25E6 is the CSS Code/unicode for a circle */
content: "\25E6";
color: green;
display: inline-block;
width: 1em;
margin-left: -0.9em;
font-weight: bold;
font-size: 1.1rem;
}
</style>
</head>
<body>
<h3>Geek Movies</h3>
<!-- Create an Unordered List -->
<ul>
<li>Star Wars</li>
<li>Back to the future</li>
<li>Ghostbusters</li>
<li>The princess bride</li>
<li>Shaun of the dead</li>
</ul>
</body>
</html>
Output:
Example 3: Square Bullets
In this example, we use the Unicode character \25AA for a square-style bullet and set the bullet color to green.
HTML
<html>
<head>
<title>Changing Bullet Colors</title>
<style>
h3 {
color: green;
}
ul {
list-style: none;
}
ul li::before {
/* \25AA is the CSS Code/unicode for a square */
content: "\25AA";
color: green;
display: inline-block;
width: 1em;
margin-left: -0.9em;
font-weight: bold;
font-size: 1.1rem;
}
</style>
</head>
<body>
<h3>Geek Movies</h3>
<!-- Create an Unordered List -->
<ul>
<li>Star Wars</li>
<li>Back to the future</li>
<li>Ghostbusters</li>
<li>The princess bride</li>
<li>Shaun of the dead</li>
</ul>
</body>
</html>
Output:
Although CSS does not provide a direct way to change the color of bullets in an unordered list, you can achieve this effect by using Unicode characters and the ::before pseudo-element. This method gives you complete control over the bullet’s style, color, and positioning, enhancing the visual appeal of your list items.
Similar Reads
How to Animate Bullets in Lists using CSS ? In this article, we will see how to animate bullet lists using CSS properties. First, we will create a bullet list using <ol> (or <ul>) and <li> and then we will apply some CSS properties to animate the lists. We will create an animation to increase the bullet point size and also s
2 min read
How to Change the Color of Bullets using CSS? Changing the color of bullets using CSS means styling the bullet points in a list (<ul> or <ol>) to have a different color than the text. This can be done using pseudo-elements or setting the color property on the list item, enhancing design consistency.1. Adding An Extra MarkupBy adding
2 min read
How to Change the Color of Link on Hover using CSS ? Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU
2 min read
How to style icon color, size, and shadow by using CSS ? Styling an icon's color, size, and shadow in CSS involves setting the color property for the icon's color, adjusting its size with font-size or width/height, and applying box-shadow or text-shadow for visual depth effects.When using Font Awesome, adding icons is simple and requires no downloads or i
2 min read
How to add color in HTML without CSS ? In HTML, adding color to text and elements is most commonly done using CSS, which provides greater control and cleaner separation of style from structure. However, there are still a few ways to add color directly within HTML, without relying on CSS. These methods are generally considered outdated bu
3 min read
How to decorate list bullets in arrow using CSS ? Given a list of items and the task is to customize the bullet style of the list and replace it with the arrow. Method 1: By Unicode Character First, we will turn off the default bullet style of the list. Then We will insert Unicode of the arrow character in the content property in the "li::before" s
2 min read