What are common list-style-type values?

Unordered: disc, circle, square, none. Ordered: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek. You can also use custom emojis or images.

What's the difference between list-style-position inside and outside?

outside (default) places the marker outside the content flow, text aligns to the left. inside places the marker inside the content box, useful for compact lists where you want the marker to flow with text wrapping.

How to use a custom image as list marker?

Use list-style-image: url('image.png'); or use ::marker with custom content property for more flexibility with emojis and text symbols.

Free Online CSS List Style Generator

← Back to Home

Updated: 2026-07-11

⚙️ List Style Settings

Customize list markers with type, color, size and position.

List Type

Unordered (ul) Ordered (ol)

Unordered List Style

Ordered List Style

Custom Symbol/Emoji

list-style-position

Marker Color

Text Color

Background

Marker Size 1.2em

Font Size 16px

Line Height 2

👁️ Live Preview

See both unordered and ordered list styling in real time.

Unordered List

Ordered List

💻 CSS Code

📖 CSS List Styling Explained

CSS list styling uses the list-style shorthand or individual properties: list-style-type, list-style-position, and list-style-image.

::marker Pseudo-element

The ::marker pseudo-element gives you independent control over list marker styles including color, font-size, and font-family. Example: li::marker { color: #f59e0b; font-size: 1.5em; }. Supported in Chrome 86+, Firefox 68+, Safari 11.1+.

CSS Counters

Use counter() and counter-increment for advanced multi-level numbering like 1.1, 1.2, 2.1, perfect for document outlines and legal clauses.

📋 CSS List Style Generator