CSS List Style Marker Generator

What is CSS List Style Marker?

CSS List Style Marker is a property that allows you to customize the markers of list items in ordered (<ol>) and unordered (<ul>) lists. Markers are the default bullets, numbers, or symbols that appear before each list item. With CSS, you can change their shape, color, size, position, or even replace them with custom images to create visually appealing and unique lists.

How CSS List Style Marker Works?

The list-style-type property controls the type of marker, while the list-style-position property adjusts its placement relative to the text. The color and font-size of markers can also be modified, and with the ::marker pseudo-element, you gain full control over styling markers directly.

Basic Syntax

A simple unordered list with square markers:

ul {
  list-style-type: square;
}

For an ordered list with decimal numbers:

ol {
  list-style-type: decimal;
}

List Marker Position

The marker can be placed inside or outside the list item text using list-style-position:

ul {
  list-style-type: disc;
  list-style-position: inside; /* marker is inside the content box */
}

ol {
  list-style-type: decimal;
  list-style-position: outside; /* marker is outside the content box */
}

Styling Markers with ::marker

The ::marker pseudo-element provides more styling options such as color, font, and size:

li::marker {
  color: #ff6600;
  font-size: 1.2em;
  font-weight: bold;
}

Custom Image Markers

You can replace default markers with custom images using list-style-image:

ul {
  list-style-image: url('bullet.png');
}

Advanced Tips

Combine ::marker with list-style-type for fallback support in older browsers.
Adjust margin and padding to control spacing between markers and text.
Use custom images for creative list designs like icons, emojis, or logos.
Remember that ::marker supports limited styling properties (color, font, content, etc.) and cannot include complex transformations.
For fully custom effects, consider hiding the default marker and adding your own content with ::before.

Browser Support

The ::marker pseudo-element and CSS list-style properties are supported in all modern browsers including Chrome, Firefox, Edge, Safari, and Opera. Fallbacks using list-style-type and list-style-image ensure compatibility with older browsers.

Conclusion

CSS List Style Marker provides designers and developers with flexible options to enhance lists visually. Using a CSS List Style Marker Generator allows you to experiment with marker types, positions, colors, sizes, and custom images quickly and efficiently. With proper styling, lists can become a visually engaging part of your website layout, improving both aesthetics and readability.

Last update: 13. 08. 2025.