The ::marker selector in CSS is used to change the marker properties. Here marker is the marker box of a list item. In an unordered list, it is a bullet and in an ordered list, it is a number.
Syntax:
::marker {
properties
}
Property values:
- All font-properties: This can change properties like font size, font-family, etc.
- Color and content: This can change the color of the marker.
- Text-combine-upright, Unicode-bidi: Sets the text-combine-upright property and Unicode-bidi property.
- Direction properties: Sets the direction.
Example 1: Altering font-properties and direction:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.div li::marker {
font-size: 30px;
font-weight: 800;
}
</style>
</head>
<body>
<div>
<ul>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
</ul>
</div>
After ::marker property
<div class="div">
<ul>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
</ul>
</div>
</body>
</html>
Output:
Example 2: When the color property of the marker is used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.div li::marker {
font-size: 30px;
font-weight: 800;
color: green;
}
</style>
</head>
<body>
<div>
<ul>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
</ul>
</div>
After ::marker property
<div class="div">
<ul>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
</ul>
</div>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome 86.0 and above (User must explicitly enable this feature)
- Microsoft Edge 86.0 and above (User must explicitly enable this feature)
- Firefox 68.0 and above
- Opera 72.0 and above
- Safari