list-style-image

The property sets an image as the marker for a list.

        
          
          ul {  list-style-image: url("rocket.svg");}
          ul {
  list-style-image: url("rocket.svg");
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Keywords:

        
          
          .selector {  list-style-image: none;}
          .selector {
  list-style-image: none;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

URL as a value:

        
          
          .selector {  list-style-image: url("starsolid.gif");}
          .selector {
  list-style-image: url("starsolid.gif");
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 The size and position of the marker cannot be controlled, so it will be equal to the size of the image and aligned to the baseline of the text. From this feature, it follows that the marker image should be prepared in advance, adjusted to the desired size.

💡 This is an inherited property, so it is usually set to the list tag so that all inner elements inherit it. However, each list item <li> can be assigned individually if desired.

💡 If for some reason the image does not load, a default marker will be shown. For <ol> it is numbering, for <ul> - a marker corresponding to the level of nesting.

💡 According to reference books, the property is not animated, but in some browsers (Chrome, Safari) there is support for a smooth change of image using transition.

        
          
          li {  list-style-image: url("marker.png");  transition: list-style-image 0.3s;}li:hover {  list-style-image: url("marker_hover.png");}
          li {
  list-style-image: url("marker.png");
  transition: list-style-image 0.3s;
}

li:hover {
  list-style-image: url("marker_hover.png");
}

        
        
          
            
            Copy
            Copied
            Failed to copy