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
431 Views
Advertisements