

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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 with CSS, the code is as follows −
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } ul { list-style: none; } ul li{ font-size: 20px; font-weight: 500; } ul li::before { content: "\2022"; color: rgb(86, 18, 117); font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; } </style> </head> <body> <h1>Change Bullet Color of List Example</h1> <ul> <li>Camel</li> <li>Goat</li> <li>Giraffe</li> <li>Lion</li> </ul> </body> </html>
Output
The above code will produce the following output −
- Related Questions & Answers
- Change Bullet Color for Lists with ::marker CSS Selector
- Set image for bullet style with CSS
- Styling Lists with CSS
- How to change colors of a Drawable in Android?
- Style unordered lists markers with CSS
- How to Change Placeholder Color for Textboxes in CSS
- Set marker inside of the box containing the bullet points with CSS
- Set marker outside of the box containing the bullet points with CSS
- How to change background images on scroll with CSS?
- How to Animate Bullets in Lists using CSS
- How to create density plot for categories filled with different colors in R?
- How to change the color of active links with CSS
- How to change the color of focused links with CSS
- How to change tabs on hover with CSS and JavaScript?
- Styling Lists in CSS
Advertisements