CSS ::marker Selector
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:
HTML
<!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 >w3wiki</ li > < li >w3wiki</ li > < li >w3wiki</ li > < li >w3wiki</ li > </ ul > </ div > After ::marker property < div class = "div" > < ul > < li >w3wiki</ li > < li >w3wiki</ li > < li >w3wiki</ li > < li >w3wiki</ li > </ ul > </ div > </ body > </ html > |
Output:
Example 2: When the color property of the marker is used.
HTML
<!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 >w3wiki</ li > < li >w3wiki</ li > < li >w3wiki</ li > < li >w3wiki</ li > </ ul > </ div > After ::marker property < div class = "div" > < ul > < li >w3wiki</ li > < li >w3wiki</ li > < li >w3wiki</ li > < li >w3wiki</ 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
Contact Us