- 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
Change Bullet Color for Lists with ::marker CSS Selector
Syntax
The syntax of CSS ::marker selector is as follows −
Selector::marker {
attribute: /*value*/;
}Example
The following examples illustrate CSS ::marker selector.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: circle;
font-size: 1.2em;
}
li::marker {
color: green;
}
</style>
</head>
<body>
<h2><strong>TMNT</strong></h2>
<ul>
<li>Raphael</li>
<li>Donatello</li>
<li>Michaelangelo</li>
<li>Leonardo</li>
</ul>
</body>
</html>This gives the following output
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square;
overflow: hidden;
}
li::marker {
color: green;
}
li {
width: 15%;
margin: 2%;
float: left;
box-shadow: inset 2px 0px 10px lightblue;
}
</style>
</head>
<body>
<ul>
<li>ting</li>
<li>tong</li>
<li>ding</li>
<li>dong</li>
</ul>
</body>
</html>This gives the following output
Updated on 10-Feb-2021 13:00:29
- Related Questions & Answers
- How to change bullet colors for lists with 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
- Set image for bullet style with CSS
- Change Cursor Color with CSS caret-color
- Change the color of top border with CSS
- Change the color of right border with CSS
- Change the Color of Active Links with CSS
- How to Change Placeholder Color for Textboxes in CSS
- Change the color of the bottom border with CSS
- Change the color of the left border with CSS
- Change the background color of a button with CSS
- How to indicate whether the marker should appear inside or outside of the box containing the bullet points with CSS?
- Styling Lists with CSS
- Cross Browser Solution for Image Marker in CSS
Advertisements