Skip to content
Related Articles

Related Articles

Improve Article

CSS ::marker Property

  • Last Updated : 23 Jul, 2020
Geek Week

The ::marker property 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 the 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 (User must explicitly enable this feature)
  • Microsoft Edge (User must explicitly enable this feature)
  • Firefox
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :