List-Specific CSS Properties (Part 2)

Beyond list-style-type, CSS provides list-style-position and list-style-image for more control over list appearance.

format_align_left

list-style-position

Controls whether list markers appear inside or outside the list items

ul {
  list-style-position: outside;
  /* default value */
}

ol.inside-list {
  list-style-position: inside;
}
check_circle

outside: Markers placed outside the list item content

check_circle

inside: Markers placed within the list item content

compare_arrows Position Comparison

Outside (Default)
  • First item with longer text that wraps to multiple lines
  • Second item
Inside
  • First item with longer text that wraps to multiple lines
  • Second item
image

list-style-image

Allows using a custom image as the list marker instead of standard bullets

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

ul.fallback {
  list-style-image: url('custom.svg');
  list-style-type: square;
  /* fallback if image fails */
}
check_circle

Use url() function to specify image path

check_circle

Always provide a fallback list-style-type

style Custom Bullet Examples

Standard Bullet
  • Standard list item
  • Another list item
Custom Image
  • Custom list item
  • Another list item
lightbulb Pro Tip

For more control over custom bullets, use background-image on ::before pseudo-elements instead of list-style-image.