Question 1

What are common list-style-type values?

Accepted Answer

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.

Question 2

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

Accepted Answer

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.

Question 3

How to use a custom image as list marker?

Accepted Answer

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

Question 4

What is the ::marker pseudo-element?

Accepted Answer

::marker lets you independently style the list marker including color, font-size, and font-family. Example: li::marker { color: red; font-size: 1.5em; }. Supported in Chrome 86+, Firefox 68+, Safari 11.1+.

📋 CSS List Style Generator

⚙️ List Style Settings

👁️ Live Preview

Unordered List

Ordered List

💻 CSS Code

📖 CSS List Styling Explained

::marker Pseudo-element

CSS Counters