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


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>

Updated on: 03-Feb-2020

239 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements