CSS List Marker Styling

This article introduces various ways to style list markers using CSS.

Also known as list styles, list markers are small symbols that identify individual <li> items within a <ul> element.

Typically, a circular bullet (•) is used as the default marker. We will explore how to apply sophisticated and customized styles using CSS properties such as list-style-type and list-style-image, as well as the ::marker and ::before pseudo-elements.

The content is organized as follows:

  1. Overview of CSS properties related to styling list markers
  2. Using the list-style-type property
  3. Using the list-style-image property
  4. Using the ::marker pseudo-element
  5. ::before Using the ::before pseudo-element

The following table summarizes the CSS properties that can be used to style list markers.

Summary of CSS properties used to style list markers
CSS Property Description Example Pros & Cons
list-style-type Specifies a text-based marker for list items. list-style-type: disc
(Supports values like disc, circle, square, etc.)		 Easy to apply with predefined browser-supported styles, ensuring visual consistency.
However, it offers limited design flexibility (e.g., color, size), and may have compatibility issues across browsers.
list-style-image Allows using a custom image as the list marker. list-style-image: url("circle.png")
(You can replace the default marker with any image.)		 Enables unique design using custom icons, graphics, or branding.
However, you must manage image creation, resolution, and sizing.
::marker Styles the marker part of a list item directly li::marker {...}
(You can control marker content, color, size, font, font weight, and more.)		 Compared to list-style-type, which only sets the marker type, the ::marker pseudo-element gives you greater control over appearance.
However, certain properties such as animation are not supported.
::before Adds custom content before each list item. li::before {...}
(Can be used to simulate a list marker with any custom content.)		 Offers complete flexibility to design animated or styled custom markers.
However, unlike list-style-type, list-style-image, or ::marker, the marker’s position must be handled manually, which can make layout more complex.

The following HTML elements are commonly used for list markers

  • <ol>
  • <ul>
  • <menu>
  • <li>

The list-style-type property specifies the type of marker to be used for list items, based on predefined values supported by the browser.

Examples of available marker types include:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • ...
HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Using the list-style-type Property</title>
        <style>
            ul {
                list-style-type: square;  /* Filled square markers */
            }

            ol {
                list-style-type: lower-roman; /* Lowercase Roman numerals */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>Item in ul</li>
            <li>Item in ul</li>
            <li>Item in ul</li>
            <li>Item in ul</li>
        </ul>
        <ol>
            <li>Item in ol</li>
            <li>Item in ol</li>
            <li>Item in ol</li>
            <li>Item in ol</li>
        </ol>
    </body>
</html>
Rendered Output

Advantages

  • Easy to apply: You can quickly choose from a set of predefined marker types supported by browsers.
  • Consistency: Maintains a familiar and consistent style that aligns with browser defaults, improving usability.

Disadvantages

  • Limited design options: Since only predefined values are available, customization in terms of color, size, or style is restricted.
  • Lack of variety: May not provide enough flexibility for unique or branded designs. Alternative styling methods may be required.
  • Browser inconsistencies: Not all browsers render all list-style-type values the same way. Some values may look different depending on the browser.

You can use the list-style-image property to display a custom image as the list marker.

Additional Explanation:
The list-style-image property allows you to specify an image file to be used as the bullet (marker) for list items.

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Using the list-style-image Property</title>
        <style>
            ul {
                list-style-image: url("heart.png"); /* Image marker */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>Item in ul</li>
            <li>Item in ul</li>
            <li>Item in ul</li>
            <li>Item in ul</li>
        </ul>
    </body>
</html>
Rendered Output

Advantages

  • Design flexibility: You can apply any image as a list marker, allowing for more visual variety.
  • Unique styling: Enables use of custom icons or graphics to make your lists stand out.
  • Branding opportunity: Company logos or brand colors can be used as list markers to reinforce brand identity.

Disadvantages

  • No size control: The list-style-image property does not allow direct control over the image size.
  • Requires asset management: You need to create, host, and maintain the image files manually.
  • Resolution concerns: You must ensure that the images are optimized for resolution and scale to prevent distortion or poor rendering.

The ::marker pseudo-element allows you to directly style the marker of a list item.

Additional Explanation:
The ::marker pseudo-element selects the automatically generated marker of an element whose display property is set to list-item.

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Using the ::marker Pseudo-element</title>
        <style>
            li::marker {
                content: "- "; /* Marker content */
                color: red; /* Marker color */
                font-size: 1em; /* Marker size */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>Item in ul</li>
            <li>Item in ul</li>
            <li>Item in ul</li>
            <li>Item in ul</li>
        </ul>
    </body>
</html>
Rendered Output

Advantages

  • Direct control: You can customize the marker's content, color, size, font, and font weight using CSS.
  • More expressive: Compared to list-style-type, it allows for greater visual customization.

Disadvantages

  • Styling limitations: Some CSS properties, such as animation and transforms, are not supported on ::marker.

Browser compatibility

In Safari, support for ::marker is limited to content, color, and font-size. Other properties may not be applied consistently.

Browser Compatibility of the ::marker Pseudo-element
Selector
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
::marker 86 86 68 11.2

See more details on caniuse.com.

The ::before pseudo-element allows you to insert custom content before each list item, effectively replacing the default marker.

Additional Explanation:
The ::before pseudo-element generates a virtual element that appears just before the actual content of the selected element. This element can be styled with CSS and used as a custom marker.

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Using the ::before Pseudo-element</title>
        <style>
            li {
                list-style-type: none; /* Remove the default marker */
            }
            li::before {
                content: "→"; /* Custom marker content */
                margin-right: 8px; /* Spacing between marker and text */
                display: inline-block;
                animation: before-bounce 1s infinite alternate; /* Animation */
                
            }
            @keyframes before-bounce {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-10px);
                }
            }
        </style>
    </head>
    <body>
        <ul>
            <li>Item in ul</li>
            <li>Item in ul</li>
            <li>Item in ul</li>
            <li>Item in ul</li>
        </ul>
    </body>
</html>
Rendered Output

Advantages

  • Custom design flexibility: You can fully customize the marker with any content, including icons, emojis, or text.
  • Supports advanced effects: Allows the use of CSS animations, transitions, and other styling options.

Disadvantages

  • Manual positioning: Unlike list-style-type, list-style-image, and ::marker, which automatically place the marker, the ::before element must be manually positioned.
  • Increased complexity: Requires more CSS and structural control, which can complicate styling and accessibility if not handled properly.

Browser compatibility

Browser Compatibility of the ::before Pseudo-element
selector
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
::before 1 12 1.5 4

See also