::marker

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the

  • and elements.

    • Try it

    li::marker {
  content: "✝ ";
  font-size: 1.2em;
}

    Group known as Mercury Seven:
    

      
  
    • Malcolm Scott Carpenter
      • 
  
    • Leroy Gordon (Gordo) Cooper Jr.
      • 
  
    • John Herschel Glenn Jr.
      • 
  
    • Virgil Ivan (Gus) Grissom
      • 
  
    • Walter Marty (Wally) Schirra Jr.
      • 
  
    • Alan Bartlett Shepard Jr.
      • 
  
    • Donald Kent (Deke) Slayton
      •

    Allowable properties

    The ::marker pseudo-element supports a limited number of CSS properties, including:

    Note: The specification states that additional CSS properties may be supported in the future.

    Syntax

    css
    ::marker {
  /* ... */
}

    Examples

    HTML

    html
      
  
    • Peaches
      • 
  
    • Apples
      • 
  
    • Plums
      •

    CSS

    css
    ul li::marker {
  color: red;
  font-size: 1.5em;
}

    Result

    Specifications

    Specification
    CSS Pseudo-Elements Module Level 4
    # marker-pseudo

    Browser compatibility

    See also