CSS list-style-image

The CSS list-style-image property is used to define/set image as the marker of list items. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      ul{list-style-image: url("images/fingerToRight.JPG");}
   </style>
</head>
<body>

   <ul>
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>
   
</body>
</html>
Output
  • CSS
  • HTML
  • JS

CSS list-style-image Syntax

The syntax of list-style-image property in CSS, is:

list-style-image: url("ImageURL");

We can also use any of the following three keywords to define the list-style-image property:

  • none - used when we do not need to display an image as the marker of list items
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS Online Test


« Previous Tutorial Next Tutorial »