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> 