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

JavascriptWeb DevelopmentFront 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>
raja
Published on 17-Apr-2018 11:00:40
Advertisements