HTML and CSS for two lists with different list-style properties
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { padding: 1em; } ul li { border: 1px #999 solid; padding: .25em; } lh { font-weight: bold; } li:before { content: attr(style); } #l1 { list-style-position: outside; } #l2 { list-style-position: inside; } </style> </head> <body> <ul id="l1"> <lh>Outside position</lh> <li style="list-style-type: none;"></li> <li style="list-style-type: disc;"></li> <li style="list-style-type: circle;"></li> <li style="list-style-type: square;"></li> </ul> <ul id="l2"> <lh>Inside position</lh> <li style="list-style-type: none;"></li> <li style="list-style-type: disc;"></li> <li style="list-style-type: circle;"></li> <li style="list-style-type: square;"></li> </ul> </body> </html>