Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change bullet colors for lists with CSS?
To change bullet colors for lists, use the ::before selector. Also, to allow adding a color, you need to set the list-style to none.
Set an Unordered List
For our example, we have set a <ul> element −
<ul> <li>Cricket</li> <li>Football</li> <li>Tennis</li> <li>Archery</li> <li>Basketball</li> <li>Hockey</li> </ul>
Set List Style
The list-style property is set to none −
ul {
list-style: none;
}
Change the Bullet Color
Use the ::before selector and set the bullet color. To display the bullet, use the content: \2022 unicode. The color is changed using the color property −
ul li::before {
content: "\2022";
width: 1em;
color: orange;
font-weight: bold;
display: inline-block;
margin-left: -2em;
}
Display Inline-block
Above, we have set the display property to the value inline-block. The display suggests how to control the layout of an element. In this case, the inline-block of the display property displays an element as an inline-level block container −
display: inline-block;
Example
Let us see an example to change bullet colors for lists with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
ul {
list-style: none;
}
ul li{
font-size: 16px;
font-weight: 500;
}
ul li::before {
content: "\2022";
width: 1em;
color: orange;
font-weight: bold;
display: inline-block;
margin-left: -2em;
}
</style>
</head>
<body>
<h1>Sports</h1>
<ul>
<li>Cricket</li>
<li>Football</li>
<li>Tennis</li>
<li>Archery</li>
<li>Basketball</li>
<li>Hockey</li>
</ul>
</body>
</html>
Updated on: 2023-11-16T14:20:49+05:30
437 Views
Advertisements