CSS list-style | list-style-position css
ExampleSpecifythepositionofthelist-itemmarkers:ul.a{ list-style-position:outside;}ul.b{ list-style-position:inside;}TryitYourself»[1]DefinitionandUsageThelist-style-positionpropertyspecifiesthepositionofthelist-itemmarkers(bulletpoints).list-style-position:outside;meansthatthebulletpointswillbeoutsidethelistitem.Thestartofeachlineofalistitemwillbealignedvertically:Coffee-Abreweddrinkpreparedfromroastedcoffeebeans...TeaCoca-colalist-style-position:inside;meansthatthebulletpointswillbeinsideth...
ExampleSpecify the position of the list-item markers:
ul.a { list-style-position: outside;}ul.b { list-style-position: inside;}
Try it Yourself »[1] Definition and UsageThe list-style-position property specifies the position of the list-item markers (bullet points).
list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically:
Coffee - A brewed drink prepared from roasted coffee beans... Tea Coca-colalist-style-position: inside; means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:
Coffee - A brewed drink prepared from roasted coffee beans... Tea Coca-cola Default value: outside Inherited: yes Animatable: no. Read about animatable[2] Version: CSS1 JavaScript syntax: object.style.listStyle...