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:

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

Advantages of the list-style-image property in CSS

list-style-image lets you use images to change the appearance of bullets or numbers in lists, allowing you to create a unique design for your website or application.
If you need to use specific images or icons to represent list items consistently across your site, list-style-image is an easy way to do so.
You can make your lists more accessible to people with visual impairments who use screen readers by using list-style-image with appropriate alt text.

Disadvantages of the list-style-image property in CSS

Using large images as list bullets can increase the file size of your page and slow down loading times. This can be particularly troublesome on slower internet connections or mobile devices.
Some older browsers may not support list-style-image or may display it inconsistently, affecting how your lists appear to some users.
If you use images that are not easily identifiable or do not convey meaning to users, your lists may become more difficult to understand and navigate.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!