list-style-position

by

list-style-position controls the placement of list markers (bullets or numbers) relative to their list items.

Values

  • inside: Places markers inside the content area of list items, aligning them with the first line of text.
  • outside: Places markers outside the content area of list items, typically to the left or right.

Usage

Apply to a list element

ul {
    list-style-position: inside; /* or outside */
}

Target specific list items

li.special {
    list-style-position: outside;
}

Example

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
ul {
    list-style-position: outside;
}

This will position the list markers to the left of the list items.

Additional Considerations

  • list-style-type: Controls the appearance of the list markers (e.g., bullets, numbers, Roman numerals).
  • list-style-image: Allows you to use custom images as list markers.
  • list-style: Combines list-style-position, list-style-type, and list-style-image into a single shorthand property.

Tips

  • Experiment with different values to achieve the desired layout.
  • Consider the overall design and readability when choosing the placement of list markers.
  • Use browser developer tools to inspect and adjust styles as needed.