<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Position of List Marker</title> <style> body{ font-size: 18px; font-family: Arial,sans-serif; } ol li { background: orange; padding: 8px; margin: 8px; } ol.in li { list-style-position: inside; } ol.out li { list-style-position: outside; } </style> </head> <body> <h2>List Number Position - Inside</h2> <ol class="in"> <li>This is a Wonderfull place.</li> <li>The Taj Mahal, is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.</li> <li>It also houses the tomb of Shah Jahan himself.</li> </ol> <h2>List Number Position - Outside</h2> <ol class="out"> <li>This is a Wonderfull place.</li> <li>The Taj Mahal, is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.</li> <li>It also houses the tomb of Shah Jahan himself.</li> </ol> </body> </html>