CSS ::marker Pseudo-element
Example
Style all list item markers with a color and a font-size:
::marker {
font-size: 20px;
color: red;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The ::marker pseudo-element is used to style
the list item marker.
This pseudo-element works on any element set to display: list-item.
Note: The following properties can be used with ::marker:
- all font properties
- all animation properties
- all transition properties
- color
- white-space
- content
- text-combine-upright
- unicode-bidi
- direction
| Version: | CSS3 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-element.
| Pseudo-element | |||||
|---|---|---|---|---|---|
| ::marker | 86 | 86 | 68 | 18.1 | 72 |
CSS Syntax
::marker {
css declarations;
}
More Examples
Example
Style the list item markers of <ul> lists with content, color and font-size:
ul li::marker {
content: "@ ";
color: pink;
font-size: 25px;
}
Try it Yourself »
Example
Set <h2> elements to display: list-item, and style the list item markers with content and color:
h2 {
counter-increment: h2;
display: list-item;
}
h2::marker {
display: list-item;
content: "@"
counter(h2) " ";
color: lightgreen;
}
body {
counter-reset: h2;
font-family: verdana;
margin: 50px;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Pseudo-elements
