Set marker outside of the box containing the bullet points with CSS

Javascript Web Development Front End Scripts

To set marker outside of the box containing the bullet points, use the list-style-position property with the value outside.

Example

The outside value means if the text goes onto a second line, the text will be aligned with the start of the first line

<html>
   <head>
   </head>
   <body>
      <ul style = "list-style-type:circle; list-style-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      <ol style = "list-style-type:decimal;list-style-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Ankith Reddy

Published on 17-Apr-2018 15:06:37

Previous Page Print Page