CSS - list-style-image



The list-style-image CSS property is used to add an image as a list item marker.

Syntax

The CSS property list-style-image can have different values. Let's check all the possible available syntax to set a value for list-style-image.

Keyword value

list-style-image: none;

URL value

list-style-image: url("<filename>");

Valid image value

list-style-image: linear-gradient(to left bottom, red, blue);

Global values

list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;

Possible Values

  • <image>: An image used as a marker.

  • none: No image used as a marker. Value set for list-style-type will be used, in case the list-style-image is set to none.

Applies to

List items. Elements such as <li> and <summary>, along with all the elements that have display: list-item.

DOM Syntax

object.style.listStyleImage = url('<filename>')

CSS list-style-image - Basic example

Here is an example of list-style-image CSS property with a valid URL for ordered and unordered lists:

<html>
<head>
<style>
  .type-url-unordered {
      list-style-image: url('images/smiley.png');
  }

  .type-url-ordered {
      list-style-image: url('images/smiley.png');
 }
</style>
</head>
<body>
  <h2>Example - list-style-image</h2>
  <ul class="type-url-unordered"><u>List style image</u>
    <li>First Item:
      <ul>
        <li>Sub-item 1</li>
        <li>Sub-item 2</li>
      </ul>
    </li>
    <li>Second Item</li>
    <li>Third Item</li>
  </ul> 

  <ol class="type-url-ordered"><u>List style image</u>
      <li>First Item</li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ol>
</body>
</html>

CSS list-style-image - Using linear-gradient()

Here is an example of list-style-image CSS property with a linear-gradient() value passed to it:

<html>
<head>
<style>
   .type-gradient {
      list-style-image: linear-gradient(to left bottom, red, orange, yellow, lightyellow, blue, magenta, purple);
   }
   </style>
</head>
<body>
   <h2>list-style-image: linear-gradient()</h2>
   <ul class="type-gradient"><u>List style image</u>
      <li>First Item:
         <ul>
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
         </ul>
      </li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ul> 
</body>
</html>

CSS list-style-image - Using 'none'

Here is an example of list-style-image: none CSS property:

<html>
<head>
<style>
   .type-image-none {
      list-style-image: none;
   }
   </style>
</head>
<body>
   <h2>list-style-image: none</h2>
   <ul class="type-image-none"><u>List style image - none</u>
      <li>First Item:
         <ul>
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
         </ul>
      </li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ul> 
</body>
</html>
Advertisements