list-style-image - HTML CSS CSS Property

HTML CSS examples for CSS Property:list-style-image

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. list-style-image

Description

The list-style-image CSS property sets an image as a list-item marker.

The following table summarizes the list-style-image Property.

Item Value
Default value: normal
Applies to:List items
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows: 


list-style-image:     url | none | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
url The location of image.
noneNo marker image will be displayed. This is default.
oblique Selects a font that is labeled oblique in the user agent's font database.
initial Sets this property to its default value.
inherit take the value of its parent element list-style-image property.

The example below shows the list-style-image property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of list-style-image Property</title>
  <style type="text/css">
    ul {<!-- www.  ja  va  2 s.c o  m-->
      list-style-image: url("https://www.java2s.com/style/demo/Google-Chrome.png");
    }
    </style>
 </head>
 <body>
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </body>
</html>

Related Tutorials