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:

Overview of CSS properties related to styling list markers
Using the list-style-type property
Using the list-style-image property
Using the ::marker pseudo-element
::before Using the ::before pseudo-element

Overview of CSS properties related to styling list markers

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>

Using the `list-style-type` property

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>

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.

Using the `list-style-image` property

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>

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.

Using the `::marker` pseudo-element

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>

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	DesktopDesktop Edge	Desktop Firefox	Safari
`::marker`	86	86	68	11.2

See more details on caniuse.com.

Using the `::before` pseudo-element

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>

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.