Detailed Explanation of the List-Style Property in CSS

1. Basic Concepts of the List-Style Property
The list-style property (list-style) is a shorthand CSS property used to control list item markers (such as bullets, numbers), comprising three sub-properties:

• list-style-type: Sets the type of marker (e.g., disc, decimal, custom characters).
• list-style-position: Controls whether the marker is positioned inside or outside the list item's content.
• list-style-image: Replaces the default marker with a custom image.

2. Property Details and Examples
（1）list-style-type
Defines the style of the list marker. Common values include:

• Unordered lists: disc (solid circle), circle (hollow circle), square (square).
• Ordered lists: decimal (numbers), lower-roman (lowercase Roman numerals), upper-alpha (uppercase letters).
• Special value: none (hides the marker).

Example:

ul { list-style-type: square; }  /* Unordered lists display squares */  
ol { list-style-type: upper-roman; } /* Ordered lists display uppercase Roman numerals */  

（2）list-style-position
Controls the marker's position relative to the list item's content:

• outside (default): The marker is outside the content box; text aligns with the marker when wrapping.
• inside: The marker is inside the content box; text indents beneath the marker when wrapping.

Example:

ul.inside { list-style-position: inside; } /* Marker embedded with text */  
ul.outside { list-style-position: outside; } /* Marker independent of text */  

（3）list-style-image
Replaces the default marker with an image, using a URL path:

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

If the image fails to load, the browser will fallback to the style defined by list-style-type.

3. Shorthand for the Compound Property: list-style
Can define type, position, and image simultaneously, in any order. Missing values will use defaults:

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

Equivalent to:

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

4. Practical Application Tips

• Custom List Markers: Combine the ::before pseudo-element and content property for more flexible markers (e.g., icon fonts, SVG).
• Clearing Default Styles: After removing markers with list-style: none, use padding and margin to adjust indentation.
• Responsive Adaptation: Use inside position to save space on small screens, or switch image marker sizes via media queries.

5. Notes

• If both list-style-image and list-style-type are defined, the image takes precedence.
• Marker styles inherit from the list element (e.g., ul, ol), but can be customized individually via li.
• Numbering for ordered lists is controlled by both list-style-type and counter-related properties (e.g., counter-reset).

By flexibly combining these properties, you can create list styles that meet design requirements while maintaining code simplicity.