Customizing List Item Bullets in CSS: From Traditional Methods to the ::marker Pseudo-element

In web development, lists are common elements for presenting structured content, but default list item markers (e.g., dots, squares) often have limited styling options, particularly in adjusting their size. Users frequently encounter questions like: How can I change the size of the bullet in an <li> element? Based on Q&A data and reference articles, this article systematically reviews solutions from traditional to modern approaches, helping developers achieve flexible customization.

Traditional Methods: Font Size Adjustment and Image Replacement

Early CSS had limited control over list markers, primarily relying on the list-style property, but directly modifying marker size was not straightforward. A common trick involves using font size to indirectly affect the marker. Since the marker size is often related to the font-size of the <li> element, you can increase the font-size of li to enlarge the marker, while using an inline element (e.g., <span>) to restore normal text size. For example:

li {
    font-size: 36px;
}
li span {
    font-size: 18px;
}
<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
</ul>

This method is simple but requires extra HTML markup, which may compromise semantic structure, and offers limited precision. Another traditional approach is to use an image as the marker via the list-style-image property, specifying a URL for full control over size and style:

ul {
    list-style: square url("bullet.png");
}

The image method allows high customization but may increase HTTP requests and require adaptation for different resolutions.

Pseudo-element Method: ::before with Positioning Control

With the evolution of CSS pseudo-elements, ::before offers a more elegant solution. By hiding the default marker (list-style-type: none) and generating custom content with ::before, you can precisely control the marker's style and position. For instance, using a Unicode character as the marker and adjusting its size and position:

li {
    list-style-type: none;
    position: relative;
}
li::before {
    content: '\2022';
    position: absolute;
    left: -0.8em;
    font-size: 1.5em;
    color: blue;
}

This method avoids extra HTML markup and provides greater flexibility, but attention is needed to positioning to ensure alignment with text. In the Q&A data, one answer notes potential indentation issues with ::before, suggesting fine-tuning via position: absolute and left values.

Modern Solution: Introduction of the ::marker Pseudo-element

The CSS ::marker pseudo-element is a modern feature specifically for styling list markers, targeting the marker box directly without hiding default styles or using extra positioning. The reference article details how ::marker works: it is automatically generated inside each list item, before the actual content and ::before. With ::marker, developers can change the marker's color, font size, content, etc., for example:

::marker {
    color: red;
    font-size: 2rem;
}
ul > li::marker {
    content: "\1F60D";
}

::marker supports a limited set of CSS properties, including color, font-*, content, but not background or padding. In the Q&A data, one answer mentions that as of 2022, Safari's support for ::marker is still limited, primarily to color and font size, so browser compatibility should be considered in real projects.

Advanced Applications and Best Practices

Combining insights from Q&A and reference articles, here are some advanced techniques:

• Dynamic Content: Use the content property with counters (e.g., counter(list-item)) to create custom numbering for ordered lists, such as content: counter(list-item) "> ";.
• SVG Integration: Embed SVG images as markers via content: url() for vector scaling and complex styling.
• Responsive Design: Utilize media queries to adjust marker size for readability across devices.

In practice, choose methods based on project needs: traditional font adjustments may suffice for simple changes, while ::before or ::marker are better for fine control. Always test browser compatibility and consider using CSS preprocessors (e.g., Sass) to simplify code maintenance.

In summary, CSS offers multiple ways to customize the size and style of list item markers, from basic tricks to modern features, enabling developers to enhance user experience flexibly. As ::marker gains adoption, list styling will become more semantic and efficient in the future.