CSS list-style-image

The CSS list-style-image property is used to define or set an 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

This example defines a CSS style rule for an unordered list (ul). The list-style-image property is used to specify the bullet point image for each unordered list item.

The list-style-image property is set to url("images/fingerToRight.JPG") in this case, which means that each bullet point will be replaced with an image of a finger pointing to the right from the website's "images" folder.

This property substitutes an image for the traditional bullet point, giving the list a more personalized appearance. The list-style-image property can be used to replace the bullet point with any image or icon that matches the content of the list.

It is important to note that the image file path must be correctly specified for the browser to locate the image file.

CSS list-style-image syntax

The syntax of the 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:

Advantages of the list-style-image property in CSS

Disadvantages of the list-style-image property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!