Styling the list part 2

• COURSES
• CODE PLAYGROUND
• DISCUSS
• TOP LEARNERS

Styling the Lists

117

2/3

     

The List Image and Position

There are also other list properties, such as:
list-style-image - specifies an image to be used as the list item marker.
list-style-position - specifies the position of the marker box (inside, outside).

In the example below, we use an image as the list item marker, and specify the position to be inside of the content flow. 

The HTML:<p>The following list has list-style-position: <strong>inside</strong>.</p>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
The CSS:

ul {
list-style-image: url("logo.jpg");
list-style-position: inside;
}Try It Yourself

Result:
"list-style-position: outside" is the default value.