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

Node.js v8.Deserializer.readUint32() Method

tarun007

Improve

Article Tags :

CSS ::marker Selector

HTML

HTML

Similar Reads

Thank You!

What kind of Experience do you want to share?