How to indicate whether the marker should appear inside or outside of the box containing the bullet points with CSS?

Javascript Web Development Front End Scripts

The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one the two values

Value	Description
none	NA
inside	If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.
outside	If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

Example

You can try to run the following code to implement list-style-position property

<html>
   <head>
   </head>
   <body>
      <ul style = "list-style-type:circle; list-style-position:outside;">
         <li>BMW</li>
         <li>Audi</li>
      </ul>
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>BMW</li>
         <li>Audi</li>
      </ul>
      <ol style = "list-style-type:decimal;list-style-position:outside;">
         <li>BMW</li>
         <li>Audi</li>
      </ol>
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>BMW</li>
         <li>Audi</li>
      </ol>
   </body>
</html>

Ankith Reddy

Published on 17-Apr-2018 11:00:40

Previous Page Print Page