Generate CSS list styles with live preview. Choose from standard bullets, numbers, emojis, custom images, and more. Copy the CSS code instantly. Pure client-side.
CSS list-style controls how list items are marked. This generator lets you preview all standard CSS list types and create custom markers with emojis, icons, or images. The generated CSS uses ::marker pseudo-element for modern browsers with fallback support.
The ::marker pseudo-element targets the list marker box of a list item. It allows you to style bullets and numbers with custom colors, fonts, and sizes. Modern browsers support ::marker, but the generator also provides fallback CSS for older browsers.
Yes, you can use the list-style-image property or the ::marker pseudo-element with content. The generator supports both approaches. For best results, use small SVG or PNG images (16x16px to 24x24px).
The ::marker pseudo-element is supported in all modern browsers including Chrome 86+, Firefox 68+, Safari 11.1+, and Edge 86+. For older browsers, the generator provides fallback CSS using standard list-style properties.
Use the ::marker pseudo-element with the color property. The generated CSS includes this automatically. For ordered lists, this changes the color of the numbers while keeping the list item text in its original color.