CSS ::marker Selector
Last Updated :
21 Feb, 2023
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 >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.
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 >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
Share your thoughts in the comments
Please Login to comment...