Copyright © tutorialspoint.com
The list-style-image property defines a pointer to an image resource that is to be used as the marker for list items.
All the elements with a display of list-item.
object.style.listStyleImage="/images/bullet.gif" |
Here is the example:
<ul> <li style="list-style-image: url(/images/bullet.gif);">Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol> <li style="list-style-image: url(/images/bullet.gif);">Maths</li> <li>Social Science</li> <li>Physics</li> </ol> |
This will produce following result:
|
To Become more comfortable - Do Online Practice
The list-style-position property affects the placement of a marker in relation to the content of the list item.
All the elements with a display of list-item.
object.style.listStylePosition="inside"; |
Here is the example:
<ul style="list-style-type:circle; list-stlye-position:outside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ul style="list-style-type:square;list-style-position:inside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style="list-style-type:decimal;list-stlye-position:outside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style="list-style-type:lower-alpha;list-style-position:inside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> |
This will produce following result:
|
To Become more comfortable - Do Online Practice
Copyright © tutorialspoint.com