CSS ::marker selector allows you to apply styles to the markers of both the unordered as well as the ordered lists. This is generally used to do simple things like colorizing them.
The ::marker selector in the following example sets the color of the unordered lists to Red and the color of the ordered lists to Blue:
Example:
ul li::marker{
color: red;
}
ol li::marker{
color: blue;
}
You can even control the size of the markers. This you can easily do with the font-size property.
See this example:
Example:
ul li::marker{
color: red;
font-size: 24px;
}
ol li::marker{
color: blue;
font-size: 24px;
}
The content property is also allowed to use with the ::marker selector. This enables you to get rid of the default bullet markers and use your custom ones.
In the following example, we have replaced the default bullet marker(•) with the heart emoji(💛).
Example:
ul li::marker{
content: '💛';
}
Please note that not all the properties can be used with the ::marker selector.
Below is the list of CSS properties that can be used with the ::marker–
- All font properties
- All animation and transition properties
- The color property
- The content property
- The white-space, unicode-bidi and the direction properties
However, some user agents may allow other properties as well.
CSS Syntax
The syntax of the ::marker selector is as follows:
::marker{
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the ::marker selector.
| Selector | |||||
| ::marker | 86.0 | 86.0 | 68.0 | 11.1 | Not supported |
