Positioning the Marker

You can specify the position of the marker in relation to the li element's content box using the liststyle-position property.

The allowed values are inside and outside.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            li.inside { 
                list-style-position: inside; 
            } 
            li.outside { 
                list-style-position: outside; 
            } 
            li { 
                background-color: lightgray; 
            } 
        </style> 
    </head> 
    <body> 
        I like: 
        <ul> 
            These are the inside items: 
            <li class="inside">A</li> 
            <li class="inside">B</li> 
            <li class="inside">C</li> 
            These are the outside items: 
            <li class="outside">D</li> 
            <li class="outside">F</li> 
            <li class="outside">G</li> 
        </ul> 
    </body> 
</html>

Click to view the demo

Home
HTML CSS Book
CSS

Lst Style: