CSS List-style

CSS list-style Property – Customize List Bullets and Numbers

The list-style property in CSS is used to customize the appearance of lists. It allows you to control the type, position, and image used for list item markers (bullets or numbers).

Syntax

The shorthand list-style property combines three properties:

list-style: list-style-type list-style-position list-style-image;

Individual Properties

  1. list-style-type:
    • Defines the type of marker (e.g., bullet, number, Roman numerals).
    • Common values:
      • disc (default): A filled circle.
      • circle: A hollow circle.
      • square: A filled square.
      • decimal: Numbers (1, 2, 3).
      • lower-roman: Roman numerals (i, ii, iii).
      • none: No marker.
  2. list-style-position:
    • Controls the position of the marker relative to the content.
    • Values:
      • outside (default): Marker is outside the content box.
      • inside: Marker is inside the content box.
  3. list-style-image:
    • Allows you to use an image as the marker.
    • Example: url('path-to-image.png').

Examples

Default List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Try It Now

Custom List Style

<ul style="list-style: square inside;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Try It Now

Using list-style-image

<ul style="list-style-image: url('star.png');">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Try It Now

Removing Markers

<ul style="list-style: none;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Try It Now

Advanced Examples

Custom Ordered List

<ol style="list-style-type: upper-roman;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Try It Now

Nested Lists

<ul style="list-style: circle;">
  <li>Item 1
    <ul style="list-style: square;">
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Item 2</li>
</ul>

Try It Now

Custom Marker with Pseudo-elements

Use ::before to create custom markers:

<ul>
  <li style="list-style: none; position: relative;">
    <span style="position: absolute; left: -20px;">⭐</span> Custom Marker 1
  </li>
  <li style="list-style: none; position: relative;">
    <span style="position: absolute; left: -20px;">⭐</span> Custom Marker 2
  </li>
</ul>

Try It Now

Best Practices

  1. Accessibility: Ensure custom markers are visually distinct for better usability.
  2. Consistency: Use the same list-style for similar lists to maintain design consistency.
  3. Fallbacks: Provide a fallback style when using list-style-image in case the image fails to load.

Experiment

Try this example:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    ul {
      list-style: circle inside;
      font-size: 18px;
    }

    ul.custom {
      list-style: none;
    }

    ul.custom li::before {
      content: "👉 ";
      color: blue;
    }
  </style>
</head>
<body>
  <ul>
    <li>Default List Style</li>
    <li>Circle Inside</li>
  </ul>

  <ul class="custom">
    <li>Custom Marker 1</li>
    <li>Custom Marker 2</li>
  </ul>
</body>
</html>

Try It Now

Experiment with different list-style properties to create unique designs!