CSS lists

Replace and remove list bullet
Replace list bullets with images
List indent

Features of CSS properties for styling lists

Change the view of the standard bullet for ordered lists
Set bullet type for unordered lists
Set an image as the list item bullet

Using HTML tags, you can create two types of lists that have bullets: ordered and unordered. By default, most browsers display unordered list bullet as a circle, and the bullets are ordered as numbers in order. CSS provides the ability to change the appearance of standard bullets. Next, you'll see examples with different kinds of bullets that you can use to change the look of your lists.

Replace and remove list bullet

To change the default appearance of a bullet in CSS, use the list-style-type property, set the value to the type of bullet you want to replace with the standard.

Example showing some bullet types for ordered lists:

CSS property:

list-style-type:

Result:

Click on the value of the property list-style-type
Watch for the change of bullets
Use the most appropriate bullets for your lists

CSS code:

ol#myList {
list-style-type: decimal;
}

Click on any property value to see the result

For unordered lists, there are only three kinds of bullets that can be set using the circle, disk, and squred values:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      .class1 { list-style-type: circle; }
      .class2 { list-style-type: disc; }
      .class3 { list-style-type: square; }
    </style>
  </head>

  <body>
    <ul class="class1">
      <li>Juice</li><li>Hot chocolate</li>
    </ul>
    <ul class="class2">
      <li>Juice</li><li>Hot chocolate</li>
    </ul>
    <ul class="class3">
      <li>Juice</li><li>Hot chocolate</li>
    </ul>
  </body>
</html>

Try it »

You can use the none value to remove bullets from items in the list, but the left indentation still remains:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      ul { list-style-type: none; }
	  ol { list-style-type: none; }
    </style>
  </head>

  <body>
    <ul>
      <li>Juice</li><li>Hot chocolate</li>
    </ul>
	<ol>
      <li>Juice</li><li>Hot chocolate</li>
    </ol>
  </body>
</html>

Try it »

Replace list bullets with images

If you do not use any of the default bullets, then CSS provides the ability to replace them with any image, in this you will be helped by the list-style-image property, in whose value you want to write the path to the selected image..

Take into account the fact that the image will not automatically be scaled under the list and will be displayed in its own size, so you'll have to select an image suitable for the size or edit the existing one by decreasing or increasing it to the desired size:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      ul { list-style-image: url('1.png'); }
      ol { list-style-image: url('2.png'); }
    </style>
  </head>

  <body>
    <ul>
      <li>Juice</li><li>Hot chocolate</li>
    </ul>
    <ol>
      <li>Juice</li><li>Hot chocolate</li>
    </ol>
  </body>
</html>

Try it »

List indent

If you remove bullets from list items, you can also remove or decrease the size of the left indentation that is set by the default browser. To completely remove indentation, you will need to use the padding-left property, which allows you to adjust the internal indentation:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      ul { 
	    list-style-type: none;
        padding-left: 0;		
	  }
	  ol { padding-left: 0;	}
    </style>
  </head>

  <body>
    <ul>
      <li>Juice</li><li>Hot chocolate</li>
    </ul>
	<ol>
      <li>Juice</li><li>Hot chocolate</li>
    </ol>
  </body>
</html>

Try it »

In the example, we completely removed the indentation on the left side, so the list items are now closely adjacent to the edge of the browser window. And as you can see from the example, the unordered list appears exactly as it was intended, but the bullets are missing in the ordered list. The reason is in the bullets themselves - by default, bullets are not part of the contents of list items, so if you remove the left indentation they do not move along with the contents of the <li> elements, but simply hide behind the edge of the browser window.

The CSS property list-style-position indicates whether the bullet should be placed inside or outside of the list items. This property can take two values:

outside - the bullet is positioned to the left of the content (the default value)
inside - the bullet is placed inside the list item along with the content

Now you can rewrite the previous example so that the indent on the left side was removed, but the bullets do not leave the browser edge:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
	  li { border: 1px solid red; }
      .class1 { list-style-position: outside; }
      .class2 { list-style-position: inside; }
      .class3 { 
	    list-style-position: inside;
		padding-left: 0;
	  }
    </style>
  </head>

  <body>
    <ul class="class1">
      <li>Juice</li><li>Hot chocolate</li>
    </ul>
    <ul class="class2">
      <li>Juice</li><li>Hot chocolate</li>
    </ul>
    <ul class="class3">
      <li>Juice</li><li>Hot chocolate</li>
    </ul>
  </body>
</html>

Try it »

In the example, a frame was added to each list item to visually show the borders of the list items.