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 11:36:37

Related Questions & Answers
Set marker inside of the box containing the bullet points with CSS
How to indicate whether the marker should appear inside or outside of the box containing the bullet points with CSS?
Change Bullet Color for Lists with ::marker CSS Selector
Set the height of a box with CSS
Set the width of a box with CSS
Set whether a punctuation character may be placed outside the line box with CSS
Set the distance between the marker and the text relating to that marker with CSS
Set image for bullet style with CSS
How to set the position of the list-item marker with JavaScript?
How to control the shape or appearance of the marker with CSS?
How to dismiss the dialog with the click on outside of the dialog box in android?
Set the minimum height that a box can be with CSS
Set the maximum width that a box can be with CSS
Set the minimum width that a box can be with CSS
Set the maximum height that a box can be with CSS

Previous Page Print Page